XML : SVG - Clicking out from the masking area of an image keep triggering the click on that image

I have an SVG with two images inside. Each image is masked. I have the image 1 on top and the image 2 below. The image 2 if not masked reach the bottom half of the masked area of image 1 as you can see on this image.

Then I have attached a click listener to both images.

My problem is that when they both are masked, if I do click on the bottom half of image 1 then the click event of the image 2 is triggered. I think this is because if the images are not masked, part of the image 2 is visible also overlapping the bottom half of the image 1. But I don't understand why because they both are masked when this happens.

Here I leave you a JSFiddle with a live example. I hope it can help you to understand better what's happening.

HTML

  <div style="display:inline-block;width:155px;height:600px;float:left;">      <svg class="side" width="155" height="600" style="stroke-width:0px;position:absolute;top:0;left:0;z-index:1;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2">          <defs>              <mask id="mask_image_001"><ellipse style="fill:#ffffff;" cx="75.54" cy="277.19" rx="50.49" ry="32.28"/></mask>              <mask id="mask_image_002"><circle style="fill:#ffffff;" cx="98.34" cy="365.73" r="39.56"/></mask>          </defs>          <rect x="0" y="0" width="155" height="600" style="fill:#ffffff;"/>          <g class="board">              <g id="group_image_001" mask="url(#mask_image_001)"><image id="image_1" width="3000" height="2000" xlink:href="http://i74.imgup.net/image_a3f72.jpg" orig_x="0" orig_y="0" class=" cursor_move" style="opacity: 1;" transform="matrix(0.13561538461538464,-0.03307692307692302,0.03307692307692302,0.13561538461538464,-231,276.9999999999998)"/></g>              <g id="group_image_002" mask="url(#mask_image_002)"><image id="image_2" width="3338" height="4550" xlink:href="http://d16.imgup.net/image_b28d1.jpg" orig_x="0" orig_y="0" class=" cursor_move" style="opacity: 1;" transform="matrix(0.06248572762902408,-0.00009288817017963043,0.00009288817017963043,0.06248572762902408,-23.9999999999997,277)"/></g>          </g>          <image class="bg noevents" xlink:href="http://k81.imgup.net/backgrounddb78.png" x="0" y="0" width="155" height="600"/>          <g id="paths_handlers">              <ellipse id="path_image_001" class="path_image noevents" rel="#mask_image_001" style="stroke:none;fill:transparent;" cx="75.54" cy="277.19" rx="50.49" ry="32.28"/>              <circle id="path_image_002" class="path_image noevents" rel="#mask_image_002" style="stroke:none;fill:transparent;" cx="98.34" cy="365.73" r="39.56"/>          </g>      </svg>  </div>  <div style="display:inline-block;float:left;">      <input type="button" class="button_switch_background" value="Switch Background" style="margin-bottom:6px;" /><br />      <input type="button" class="button_switch_mask" value="Switch Mask Image 2" style="margin-bottom:6px;" /><br />      Clicked: <span class="status"></span>  </div>  <div style="clear:both;"></div>    

JAVASCRIPT

  var colors = ["#c00", "#0c0", "#00c"];  var color_index = 0;  $(function(){      $(".button_switch_background").click(function(){          // just switching the background          var t = "url(#mask_image_002)";          if ($("svg .bg").css("display") != "none")              $("svg .bg").css({display: "none"});          else              $("svg .bg").css({display: ""});      });      $(".button_switch_mask").click(function(){          // just switching the mask          var t = "url(#mask_image_002)";          $("#group_image_002").attr("mask", ($("#group_image_002").attr("mask") == t)? "_"+t: t);      });      $("svg image").click(function(){          console.log($(this).attr("id"));          $(".status").html($(this).attr("id")).css({color: colors[(color_index++)%3]});      });  })    

CSS

  * { font-family: Arial; }  .noevents {      pointer-events: none;  }    

MY GOAL: In case both images are already masked... I want when I click on the bottom half of the image 1, the click event of image 1 be triggered and NOT the click event of image 2.

Thanks.