Question

我有一个div，它是一个面板。在这个面板上，我覆盖了一些想要分别捕获点击事件的图像。我想在选择div时捕获click事件，但是在单击任何按钮时不捕获。

我的HTML：

<div class="html5PlayerPanel">     
    <img src=".delete.png" class="delete">        
</div>

我试过了：

$('.html5PlayerPanel').on('click', ".delete", function (event) {       
        event.stopPropagation();

        return false;
});

并使用Not选择器：

$(":not(.delete) .html5PlayerPanel").click(function () {

});

然而，每次单击图像时，图像单击事件都会触发背景div单击事件。

Answer 1

在原始父级点击功能中写，

$('.html5PlayerPanel').click(function(event){
    if(!$(event.target).hasClass('delete')){

    }
});

如果当前点击的目标是'.delete'则不执行任何操作。

Answer 2

我的问题实际上与图像添加到标记的时间有关。我正在设置点击事件，然后将图像添加到面板中。点击事件正在被击中，但事件传播似乎仍然被激发。

Answer 3

您可以使用单击侦听器并在内部抓取您单击的元素的类型。

$('.html5PlayerPanel').on('click',function(event){
    console.log(event.target.nodeName);
    switch(event.target.nodeName){
        case 'DIV':
            console.log('you clicked on the div');
            break;
        case 'IMG':
            console.log('you clicked on the img');
            break;
        default:

    }
})

看看：http://jsfiddle.net/tornado1979/ho7odv3e/ 祝你好运

Jquery阻止点击事件传播到内部按钮

3 个答案: