jquery - 单击子图像链接转到父背景图像链接

Question

我有这个页面: http://test.actful.com/demo/actfulhome-hovertile2.html

我们在此页面上有平铺图像，悬停时每个平铺上都会显示一些图标。有一个背景链接，每个图标都有自己的链接(目前只有“#”)，背景链接打开一个模式并显示一个页面。当前，当我单击图标时，背景链接有效并且模式打开。我不希望点击图标上的链接时背景链接生效。我如何实现这一目标。我尝试为背景设置一个较低的 z-index 属性，为图标设置一个较高的 z-index 属性，但这并没有解决问题。我该如何解决这个问题？

您可以查看 html 页面的源代码，但让我更具体一些

这是每个图 block 的代码:

    <div class="contenthover actfulModalButton">
                  <div>
                    <div class="four columns icon-align-center align-left"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_ActfulFBIcon.svg" alt="Face Book"/></a></div>
                    <div class="four columns icon-align-center align-center"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_ActfulKangarooIcon.svg" alt="Actit"/></a></div>
                    <div class="four columns icon-align-center align-right"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_actfulCommentsIcon.svg" alt="Comments"/></a></div>
                  </div>
                  <div class="button-bottom">
                    <button data-act-itemid="100" class="small button actfulModalButton">View Details</button> 
                  </div>
                </div> 

底部 jquery 代码之后的 jquery 在页面加载时为“actfulModalButton”(父背景 div)创建一个链接:

     $(".actfulModalButton").click(function() {      
     var itemid = $(this).attr('data-act-itemid');
     $("#actItemFrame").attr('src', 'actful-item-details.html?actitemid='+itemid);
     $("#actItemModal").reveal();   
   });

希望对您有所帮助。

谢谢，

Answer 1

$(".actfulModalButton").click(function(event) {
  event.stopPropagation(); // this code will prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
  var itemid = $(this).attr('data-act-itemid');
  $("#actItemFrame").attr('src', 'actful-item-details.html?actitemid='+itemid);
  $("#actItemModal").reveal();   
});

[更新]

我现在明白你想要什么了。

您只需添加以下内容，并保持您的代码不变:

$(".actfulModalButton a.tile-icon-link").click(function(event) {
  event.stopPropagation(); // this code will prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. 
});