javascript - 在 btn 但不是容器上运行 javascript

Question

我有这个：http: //jsfiddle.net/G3VjC/

这很简单：

$(document).ready(function() {

$(document).on('click','#btn',function(){
    console.log('ran btn');
});
$(document).on('click','#containerdiv',function(){
    console.log('ran div');
});

});

但是当单击按钮时，运行 btn JS 和容器 JS（请参阅控制台日志）。

我怎样才能将它们分开？

谢谢

Answer 1

采用stopPropagation()

$(document).on('click','.meee',function(e){ // add event as argument
    console.log('ran btn');
    e.stopPropagation()
});

Answer 2

试试这个

$(document).ready(function() {
    $(document).on('click','#containerdiv',function(){
        console.log('ran div');

    });

    $(document).on('click','.meee',function(){
        console.log('ran btn');
        return false;
    });
});

演示

Answer 3

或者试试这个：

$(document).ready(function() {
    $('#containerdiv').click(function(){
        console.log('ran div');
    });

   $('.meee').click(function(e){
           e.stopPropagation();
           console.log('ran btn');
   });
});

正如 chumkiu 已经说过的，只需使用 stopPropagation()

Answer 4

$(document).on('click','#btn',function(e){
e.stoppropagation();
var target = $(e.target);
if(!target.attr('id') == 'btn'){
 e.preventDefault();
 $(target.find("#btn)).trigger("click")
}
//any additional logic if the target was of the intended type.
});