捕获和冒泡事件

Capturing and bubbling events

本文关键字：事件      更新时间：2023-09-26

我创建了下一个jsfiddle:

http://jsfiddle.net/AHyN5/6/

这是我的代码:

var mainDiv = document.getElementsByClassName('mainDiv');
var div = mainDiv[0].getElementsByClassName('data');
mainDiv[0].addEventListener("click", function(e) {
     alert('1');
});
$(mainDiv[0]).children('img').click(function (e) {
    e.stopImmediatePropagation()
     return false;    
})

我想点击粉红色的背景将弹出一个消息值为1(一个警告消息)。

当点击黄色时，我不希望发生任何事情。

我读了这个博客，但是没有成功。

感谢任何帮助!

我同意其他人使用jQuery或直接调用DOM的说法。

下面是另一个jQuery解决方案——与上面的非常相似。我继续展示它，因为它直接针对图像-以防这是你真正想要完成的。 
$(function()
{   var mainDiv = $('div.pink:first'),
        imgs = $('img');
    mainDiv.click(function()
    {   alert('1');
    });
    imgs.click(function(e)
    {   e.stopImmediatePropagation();
    });
});

您可以将pointer-events: none;添加到黄色类中。这将导致这些元素不触发点击事件。

查看更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

混合了jQuery和DOM方法调用。还要注意，对于附加事件侦听器，您应该等待所有HTML文档准备就绪。

我建议使用DOM方法或jquery方法。下面是一个jquery的例子:

$(function(){
    $('.pink:first').on("click", function(e) {
         alert('1');
    });
    $('.yellow').on('click', function (e) {
        e.stopPropagation();
    });
})

请参阅此jsfield

相关文章：