Question

我有一个图片库（滑块），如下所示：

<div class="imgWrap current">

    <img src="image1" />

</div>
<div class="imgWrap">

    <img src="image2" />

</div>
<div class="imgWrap">

    <img src="image3" />

</div>

然后我有一些事件：

$(document).on('click', '.current img', function(){

    $('#anotherDiv').click();
});

一切正常。

我现在尝试制作一个事件，只点击div（而不是图像），如下所示：

$(document).on('click', $('div:not(img)'), function(){

    $('#anotherDiv2').click();
});

我的情景是：

我点击图片转到下一张图片，如果我从图片中点击外面，那么他们会回到图库。

div imgWrap填满了整个页面，我无法更改HTML代码。

这甚至可能吗？

Answer 1

停止从图像传播

$(document).on('click', '.imgWrap img', function (e) {
    console.log('img');
    e.stopPropagation()
});
$(document).on('click', '.imgWrap', function (e) {
    console.log('div');
});

演示：Fiddle

Answer 2

在这种情况下，您可以使用e.stopPropagation()

$('.current img').on('click', function(e){
     e.stopPropagation();
});

如何在特定div上进行单击事件

2 个答案: