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

Question

我有一个列表o 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>

IT工作！但在某些特殊情况下，缩略图必须显示一种按钮，因此我使用定位<i></i>，因为我在项目中使用了Font Awesome。

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

问题是：

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

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

<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'）点击更改为：

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

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

这将阻止点击事件冒泡触发点击甚至是我的父母（li）。注意我添加了事件对象作为参数，我在执行任何其他操作之前调用了stopPropagation（http://api.jquery.com/event.stoppropagation/）方法。

Answer 2

检查e.target是否与此相同：

<script type="text/javascript">
    $('.box').click(function(e) {
        if( e.target !== this )  return;
        return $(this).ekkoLightbox();
    });
    $('.seq').click(function() {
        console.log($(this).attr("id")); //IT WORKS!
        *do other action...* 
    });
</script>