JQuery检测嵌套元素上的点击交互导致巨大的循环

Question

试图将click事件添加到嵌套在多个元素之间的按钮(ul,div.col,li,div.panel,div.panel-body).我可以使用下面的代码访问它,但是好像我点击页面多次,console.logs开始循环并执行数千次.

我几乎肯定是它导致了这个功能的嵌套.但是我在JQuery中没有足够的背景知道能够准确地告诉浏览器正在做什么.

这是我的JQuery代码:

        $('#displayList #col1').click(function(){
        console.log('clicked col');
        $('li').click(function(){
            var id = $(this).attr('id');
            console.log(id);
            $('div.panel').click(function(){
                console.log('clicked panel');
                $('div.panel-body').click(function(){
                    console.log('clicked panel body');
                    $('button').click(function(){
                        console.log('clicked button');
                        return;
                    });
                    return;
                });
                return;
            });
            return;
        });
        return;
    });   

你们其中一个精彩的JQuery大师可以解释导致这个错误的原因,并指出我是否有更好的路径来检查按钮是否被点击或者是否没有(只是单击了面板).

另外,有没有人知道一个好的,最好是免费的调试程序,我可以通过执行来逐步执行JQuery代码执行？

非常感谢你的知识

Answer 1

您正绑定另一个事件处理程序中的事件处理程序.因此,每当发生后一事件时,都会添加新的处理程序,最终导致同一元素上的同一事件的多个处理程序.

你的代码看起来应该是这样的

$('#displayList #col1').click(function(){
    console.log('clicked col');
});
 $('li').click(function(){
    var id = $(this).attr('id');
     console.log(id);
});
$('div.panel').click(function(){
     console.log('clicked panel');
});
$('div.panel-body').click(function(){
      console.log('clicked panel body');
});
$('button').click(function(){
      // The following will be executed when the button is clicked 
      console.log('clicked button');
});

假设您有以下标记:

<div id="container>
  <div id="parent">
    <button>Click Me!</button>
  </div>
</div>

和事件处理程序:

$("#container").click(function(){
  console.log("container got a click!");
});
$("#parent").click(function(){
  console.log("parent got a click!");
});
$("#parent button").click(function(){
  console.log("button got a click!");
});

现在,如果单击按钮输出即可

//button got a click!
//parent got a click!
//container got a click!

当您单击一个元素时,默认情况下它的所有祖先也会收到一个click事件,并且将调用相应的事件处理程序(如果有) - 这称为事件冒泡.如果您不需要任何特定功能,那么您不需要处理程序,因此不会受到伤害.

但是,您可以通过stopPropagation()在事件处理程序中调用事件对象的方法来阻止此行为:

$("#parent button").click(function(e){
      e.stopPropagation();
      console.log("button got a click!");
});

输出将是

//button got a click!

在某些浏览器中还有一种事件传播方法(所有主流浏览器都支持事件冒泡模型),您可以详细阅读@ quirksmore:事件顺序

正如DFTR在评论中提到的,

当在Internet Explorer中启动应用程序时,Visual Studio允许javascript代码中的断点.另一个调试工具是firebug,这是一个非常整洁的firefox扩展