Javascript 使用嵌套的单击处理程序是否不好？

有人曾经向我提到过这一点，但我从未找到任何支持这一说法的文件。在应用程序中使用嵌套的单击处理程序是否不好？例如：

$("div").on("click", function(){
    //*Do things*
    $("p").on("click", function(){
        //*Do things*
    })
})

---

如果这是不好的做法，为什么？还有什么更好的解决方案？

是的，这是不好的做法。原因是多次单击div会导致将多个事件添加到另一个元素中。双击外部，您将在段落标记中添加两次单击事件

如果你真的想像那样添加点击，你需要解除任何已经添加的事件的绑定

$("div").on("click", function(){
    //*Do things*
    $("p").off("click.myNameSpace").on("click.myNameSpace", function(){
        //*Do things*
    })
});

另一个选项是添加事件并将逻辑放入单击中，以查看它是否应该运行

(function () {
   var isActive = false;
    $("div").on("click", function(){
        isActive = false;
    });

    $("p").on("click", function(){
        if (isActive) {
            isActive = false;
            console.info("The p was clicked");
        }
    });
}());

---

是的，一般来说很糟糕，除非那正是你想要的

如果有人两次单击一个div，那么该段落的事件处理程序将被附加两次，执行两次“操作”，请尝试

$（'div'）。在（'click'，function（）上{
$（'p'）。在（'click'，function（）上{
警惕（“这很烦人”）；
});
});

点击我几次？




。。。然后单击me
“这是一种不好的做法吗？”：是的，因为内存分配将有条件地进行，由于GC搅动，这通常被认为是不好的。它也促进了错误的逻辑，这越来越依赖于语言理解你的能力，而不是你理解语言

“什么是更好的解决方案？”：注册必要的事件处理程序，根据其他处理程序设置的条件变量在处理程序中应用逻辑以执行

即：当事件a发生时，有条件地设置处理程序b。相反：处理程序a被设置为包含设置处理程序b中引用的变量的代码。处理程序b也已设置。事件b会激发，但会根据引用的变量有条件地执行。
这是错误的，因为在您的示例中，每次单击“div”时，都会向“p”添加一个新的处理程序。在单击“p”之前单击三个“div”，那么“p”事件处理程序将运行三次

解决此问题的一种方法是使用委托：

$（document）.delegate（“p”，“click”，函数（）{/*dostuff*/}）

另一种方法是解除现有处理程序的绑定，然后重新绑定它们：

$（“p”）.off（）；
$（“p”）。在（“单击”，函数（）{}）

第三种方法是使用脏标志（需要将其设置为globals，这并不是最佳做法）来检查处理程序是否已经在处理该事件调用：

$（“p”）。在（“单击”）上，函数（）{
国际单项体育联合会（旗）{
返回；
}否则{
flag=true；
doStuff（）；
flag=false；
}
});
将它们并排嵌套，而不能将它们并排嵌套，您试图实现什么目标？每次单击
div
；在
p
标记中再添加一个单击处理程序。看见here@EricPhillips，嗯，在我当前的任务中，我必须单击地图对象并查找我是否单击了某个特定的对象。如果我这样做了，那么我必须单击地图对象中的另一个区域来移动它并更新地图上的位置。我希望这是有道理的。