jQuery阻止事件传播

要删除之前已经分配给一个标签的事件，jQuery的unbind（）允许做到这一点。要使用它，首先创建一个jQuery对象，带有想要从其上删除事件的元素。然后，添加unbind（）函数，传递给它一个带有事件名称的字符串。例如，如果想要阻止类为tabButton的所有标签响应任何click事件，可以这么编写：

$（'.tabButton'）.unbind（'click'）；

看一下这个简短的脚本，来了解unbind（）函数是如何工作的。

    $（'a'）.mouseover（function（）{
    alert（'You moved the mouse over me！'）；
    }）；
    $（'#disable'）.click（function（）{
    $（'a'）.unbind（'mouseover'）；
    }）；

第1行到第3行为页面上所有的链接（＜a＞标签）的mouseover事件添加了一个函数。把鼠标光标移动到链接上，会打开一个带有消息“You moved your mouse over me！”的警告框。然而，由于警告消息的频繁出现可能会令人厌烦，第4行到第6行允许访问者关闭警告框。当访问者单击带有ID为disable的一个标签的时候（例如，一个表单按钮），mouseover事件会从所有的链接删除，并且警告框不再出现。

阻止一个事件传播

Internet Explorer和W3C的事件模型都得到了Firefox、Safari和Opera的支持，这使得事件传递超出了初次接收事件的元素的范围。例如，假设要把一个事件辅助函数分配给一个特定链接的click事件，当单击该链接的时候，click事件触发，函数运行。然而，这个事件并没有在这里停止。每个祖先元素（标签包围着单击的元素）也可以响应同样的单击。因此，如果给包含该链接的一个＜div＞标签分配一个click事件辅助函数，用于该＜div＞标签的事件的函数也会运行。

这一概念叫做事件冒泡（event bubbing），意味着多个元素可以响应同一个操作。这里有个例子：假设为一幅图像添加了一个click事件，以便单击图像的时候，一幅新的图像会取代它。该图像位于一个＜div＞标签中，我们也给该标签分配了一个click事件。在这个例子中，当单击＜div＞的时候，会出现一个警告框。现在，当单击图像的时候，这两个函数都会运行。换句话说，即便单击了图像，＜div＞也接收到了click事件。

你可能不会经常遇到这种情况，但是遇到的时候，结果就会令人不安。假设在前面的例子中，当单击图像的时候，我们不希望＜div＞做任何事情。在这个例子中，我们必须阻止click事件传递到＜div＞标签上，而又不会妨碍处理图像的单击事件的函数执行。换句话说，当单击图像的时候，分配给图像的click事件的函数会替换一幅新的图像，然后就停止click事件。jQuery提供了一个名为stopPropagation（）函数来阻止事件传递到一个祖先标签上。这个函数是事件对象的一个方法，因此，在一个事件处理函数中访问它：

    $（'#theLink'）.click（function（evt）{
    //do something
    evt.stopPropagation（）；//stop event from
    continuing
    }）；

转载请注明出处：http://uphtm.com/js/135.html