本文主要介绍JS传播事件，取消事件的默认行为，防止事件的传播。它通过事件处理程序返回值的调用顺序来说明详细的过程。有需要的朋友可以参考一下。

1.事件处理程序的返回值

通常，false的返回值告诉浏览器不要执行与该事件相关的默认操作。比如表单提交按钮的onclick事件处理程序可以通过返回false来阻止浏览器提交表单，A标签的onclick事件处理程序可以通过返回false来阻止跳转到href页面。同样，如果用户输入了不适当的字符，输入域上的onkeypress事件处理程序可以通过返回false来过滤键盘输入。

事件处理程序的返回值仅对通过属性注册的处理程序有意义。

2.调用顺序

文档或其他对象可以为指定的事件类型注册多个事件处理程序。当适当的事件发生时，浏览器必须根据以下规则调用所有事件处理程序：

通过设置对象属性或HTML属性注册的处理程序总是首先被调用。

用addEventListener()注册的处理程序按照它们注册的顺序被调用。

用attachEvent()注册的处理程序可以按任何顺序调用，所以代码不应该依赖于调用顺序。

3.事件传播

在调用在目标元素上注册的事件处理程序后，大多数事件将“冒泡”到DOM的根。调用目标的父元素的事件处理程序，然后调用在目标的祖父元素上注册的事件处理程序。这一直到文档对象，最后到窗口对象。

大多数发生在文档元素上的事件都会冒泡，除了焦点、模糊和滚动事件。文档元素的load事件将冒泡，但它将在文档对象上停止冒泡，而不会传播到窗口对象。Window对象的load事件只有在整个文档被加载时才会被触发。

4.取消事件默认行为、阻止事件传播

在支持addEventListener()的浏览器中，可以通过调用事件对象的preventDefault()方法来取消事件的默认操作。在IE9之前的IE中，将事件对象的returnValue属性设置为false也可以达到同样的效果。下面的代码结合了三种取消事件的技术：

函数cancelHandler(事件){

var event=event | | window.event//与IE兼容

//取消与事件相关的默认行为

If(event.preventDefault) //标准技术

event . prevent default()；

If(event.returnValue) //与IE9之前的IE兼容

event.returnValue=false

返回false//用于使用对象属性处理注册的处理程序

}

取消与事件相关的默认操作只是事件取消的一种，我们还可以取消事件传播。在支持addEventListener()的浏览器中，可以调用event对象的stopPropagation()方法来防止事件传播。如果在同一个对象上定义了其他处理程序，仍将调用其余的处理程序，但在调用stopPropagation()后，将不会调用任何其他对象上的事件处理程序。

IE9之前的IE不支持stopPropagation()方法，而是将事件对象的cancelBubble属性设置为true，防止事件进一步扩散。

好了，这就是边肖为大家整理的所有内容。希望对大家有帮助~