我不想要底层 div 的 jQuery 点击事件答案

【问题标题】：I don't want jQuery click event of underlying div我不想要底层 div 的 jQuery 点击事件
【发布时间】：2012-09-23 12:13:20
【问题描述】：

我有一些带有点击操作的 div 和第一个内部的另一个 div - 右上角的“close-cross”女巫关闭第一个或其他任何地方。

问题是当点击接近交叉的 div 时，也会调用主 div 的点击动作。理论上两者都被点击，因为鼠标按钮被按下，并且鼠标指针在两个div上方，但我只希望直接点击的div调用它的点击事件。

【问题讨论】：

您能发布您的 html/javascript 代码吗？
我认为我明白你在问什么，但是把小提琴放在一起或显示一些标记会更有助于理解你的意思。

标签： jquery click jquery-events

【解决方案1】：

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

【讨论】：

【解决方案2】：

在关闭函数中，您需要调用 event.stopPropagation()

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

这将防止事件冒泡到父 div。更多关于事件冒泡：

What is event bubbling and capturing?

【讨论】：

【解决方案3】：

Event Bubbling，就是这个叫法，可以用这个来检查：

$(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();
    });
    });

【讨论】：

【解决方案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 !!');
    });
});

【讨论】：