javascript - jQuery，单击其可单击容器内的元素 - 如何覆盖

Question

我有一个元素列表 li那成为我的图像轮播。每个元素都是一个缩略图，它可以使用 jQuery 进行点击，因为我需要将图像设置为 li。 background-image .这是我无法改变的。当拇指点击时，它会调用一个灯箱来显示作为 bg 参数传递的图像。

<ul id="piclist">
    <li class="box" style="background-image: url('url_1');"><i class="seq" id="1"></i></li>
    <li class="box" style="background-image: url('url_2');"></li>
    <li class="box" style="background-image: url('url_3');"><i class="seq" id="2"></i></li>
    <li class="box" style="background-image: url('url_4');"></li>
</lu>

我的 jQuery 代码片段是:

<script type="text/javascript">
    $('.box').click(function() {
        return $(this).ekkoLightbox();
    });
</script>

它起作用了!但在某些特殊情况下，缩略图必须显示一种按钮，所以我使用了一个定位 <i></i>因为我在元素中使用了 Font Awesome。

下面的图片可以说明我在说什么:

问题是:

当 li加载 i元素，它也必须是可点击的，并且它的链接必须覆盖他的父链接——容器。

我在 jQuery 中编写了一段代码来执行此操作，但总是在我单击 i 时出现元素按钮，操作从 li 加载图像灯箱.这是不对的。它应该做另一个 Action ，例如，在新窗口中打开一个 URL，加载另一个模态，等等。

<script type="text/javascript">
    $('.box').click(function() {
        return $(this).ekkoLightbox();
    });
    $('.seq').click(function() {
        console.log($(this).attr("id")); //IT WORKS!
            *do other action...* //Doesn´t work, open the <li> lightbox!
    });
</script>

有什么帮助吗？ :)

Answer 1

将 $('.seq') click 更改为:

$('.seq').click(function(ev) {
   ev.stopPropagation();

   console.log($(this).attr("id")); //IT WORKS!
   *do other action...* //Doesn´t work, open the <li> lightbox!
 });

这将防止点击事件冒泡并触发点击，即使是 i 的父级(li)。请注意，我将事件对象添加为参数，并且在执行任何其他操作之前调用了 stopPropagation ( http://api.jquery.com/event.stoppropagation/) 方法。