Question

有人曾向我提过这一点，但我从未找到任何支持该声明的文件。在应用程序中嵌套点击处理程序是不是很糟糕？例如：

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

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

Answer 1

是的，这通常很糟糕，除非这正是你想要的？

如果有人点击div两次，段落的事件处理程序会附加两次，执行“事情”两次，尝试

$('div').on('click', function() {
  $('p').on('click', function() {
    alert('This is annoyning');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>click me a few times ?</div>
<br /><br /><br />
<p>... then click me</p>

更好的解决方案就是不嵌套事件处理程序

var isClicked = false;

$('div').on('click', function() {
    isClicked = true;
});

$('p').on('click', function() {
    if (isClicked) // do stuff
});

（简化为显示概念，不使用全局变量，jQuery有data()）

Answer 2

是的，这是不好的做法。原因是对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");
        }
    });
}());

Answer 3

“这是不好的做法吗？” ：是的，因为内存分配会有条件地发生，由于GC流失，它总是被认为是坏的。它还促进了错误的逻辑，它越来越依赖于语言理解你的能力，而不是你理解语言。

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

I.E。当事件a发生时，处理程序b有条件地设置。相反：设置Handler a包含设置Handler b中引用的变量的代码。处理程序b也设置。事件b触发但基于引用的变量有条件地执行。

Answer 4

这很糟糕，因为在你的例子中，每次点击＆＃34; div＆＃34;您将在＆＃34; p＆＃34;中添加新的处理程序。点击三个＆＃34; divs＆＃34;在你点击＆＃34; p＆＃34;和＆＃34; p＆＃34;事件处理程序将运行三次。

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

$(document).delegate("p", "click", function () { /* do stuff */ });

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

$("p").off(); $("p").on("click", function () { });

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

$("p").on("click", function () { if (flag) { return; } else { flag = true; doStuff(); flag = false; } });

嵌套点击处理程序是不是很糟糕？

4 个答案: