Question

我的点击操作有一些div，第一个是div内部 - 右上角的'close-cross'关闭第一个或其他任何一个。

问题是当单击close-cross div时，也会调用主div单击操作。理论上两者都被点击，因为鼠标按钮被按下，鼠标指针位于两个div之上，但我只想点击直接调用它的点击事件。

由于

Answer 1

您想使用event.stopPropagation()方法。这可以防止事件冒泡DOM树。 See the jQuery documentation here

Answer 2

在关闭功能中，您需要调用event.stopPropagation（）

http://api.jquery.com/event.stopPropagation/

这可以防止事件冒泡到父div。有关事件冒泡的更多信息：

What is event bubbling and capturing?

Answer 3

事件冒泡，就是这个被调用的，可以使用它来检查：

$(document).ready(function() {
$('#main').click(function(event) {
if (event.target == this) {
//Your code here
}
});
});

event.stopPropagation();停止事件的旅程

$(document).ready(function() {
    $('#close-cross').click(function(event) {

    //Your code here
   event.stopPropagation();
    });
    });

Answer 4

Check this FIDDLE

$(document).ready(function() {
     // Outer Div click Event
    $('div.a').on('click', function(e) {
        if (e.target.className === 'b') {
            e.preventDefault();
        }
        else {
            alert('Outer Div Clicked !!');

        }
    });

    // Inner Div Click event
    $('div.b').on('click', function(e) {
        alert('Inner Div Clicked !!');
    });
});

我不希望底层div的jQuery click事件

4 个答案: