javascript - 捕捉和冒泡事件

我创建了下一个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();
    });
});