Question

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

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

您可以查看html页面的来源，但让我更具体一点

以下是每个磁贴的代码：

    <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. 
});

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

1 个答案: