在大项目中关闭HTML点击模式

时间:2013-05-27 17:14:11

标签: javascript jquery javascript-events stoppropagation

我认为其他开发者之前遇到过这种情况。我们有一个庞大的代码库,其中包含许多遵循此模式的组件:

$('#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都停止关闭其他组件。我们真正想要的是一种机制,只阻止该组件的点击处理程序,而不是其他组件。

我正在寻找一种最容易实施的解决方案来修复我们的错误,以及我们的多开发人员团队将来会采用这种解决方案。

1 个答案:

答案 0 :(得分:1)

.live()方法会在事件传播到文档顶部后对其进行处理,无法使用实时事件停止传播这可以让您进行黑客攻击并利用这是因为.live()方法将处理程序绑定到$(document),并使用event.target属性标识在层次结构顶部触发事件的元素。

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

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

来阻止委托处理程序触发

请参阅此示例:http://jsfiddle.net/knr3v/2/

因此,您可以使用livedelegate方法代替click,bind,on method来完成您正在解释的内容。