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>

有用!但在某些特殊情况下,缩略图必须显示一种按钮,因此我使用了一个定位<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/)方法.