关闭HTML点击模式，跨大型项目

Closing on HTML click pattern, across large project

本文关键字：大型项目 模式 HTML 关闭      更新时间：2023-09-26

我想其他开发人员以前也遇到过这种情况。我们有一个很大的代码库，其中有许多组件遵循以下模式:

$('#elm').on('click',function($e){
    $e.stopPropagation();
    //... do stuff (i.e. Open something);
});
$('html').on('click',function($e){
    //... do oposite of stuff (i.e. Close something);
}

我们的问题是，整个站点的所有stopPropagation都停止关闭其他组件。我们真正想要的是一种机制，只阻止这个组件的click处理程序，而不阻止其他组件的click处理程序。

我正在寻找一个解决方案，这是最容易实现现在修复我们的错误，并为我们的多开发团队在未来遵循。

.live()方法处理事件，一旦他们传播到文档的顶部，它是不可能停止传播使用实时事件这允许你做hack和利用这一点，因为.live()方法绑定处理程序到$(document)，并识别哪个元素触发事件在层次结构的顶部使用event.target属性。

stopPropagation阻止传播冒泡向上DOM层次结构，但由于处理程序位于文档级别，因此没有更高的位置可以传播。

另一方面请注意，.delegate()处理的事件将冒泡到它们绑定的元素;在调用委托的事件处理程序时，绑定在DOM树下的任何元素上的事件处理程序将已经执行。因此，这些处理程序可以通过调用event.stopPropagation()

来阻止委托处理程序的触发。

请看下面的例子:http://jsfiddle.net/knr3v/2/

因此，您可以使用live和delegate方法来代替click, bind, on方法来完成您正在解释的操作。

相关文章：