0

我有这个页面： 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();   
   });

我希望这有帮助。

谢谢，

4

1 回答 1

0 
$(".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. 
});
于 2013-01-07T09:57:20.317 回答