浅谈javascript事件取消和阻止冒泡

在Web开发中，JavaScript事件处理是非常重要的一部分。本文将详细介绍如何使用原生JavaScript取消事件的默认操作和阻止事件冒泡，同时也会通过示例代码进行说明。

一、取消事件的默认操作

在不同的浏览器中，取消事件的默认操作的方法有所不同。在w3c标准中，可以通过调用事件对象的preventDefault()方法来取消事件的默认操作。而在IE浏览器中，则需要设置事件对象的returnValue属性为false来达到同样的效果。在支持addEventListener()的浏览器中，也可以调用时间对象的preventDefault()方法。为了兼容各种浏览器，可以在事件处理程序中同时使用以上三种取消技术。

示例代码：

```javascript

function cancelHandler(event) {

var event = event || window.event; // 兼容IE浏览器

if (event.preventDefault) event.preventDefault(); // 调用preventDefault()方法取消默认操作

if (event.returnValue) event.returnValue = false; // 设置returnValue为false，针对IE浏览器

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

}

```

二、阻止事件冒泡

事件冒泡是DOM事件流中的一个重要概念。阻止事件冒泡可以防止事件进一步传播到其他元素。在w3c标准中，可以通过调用事件对象的stopPropagation()方法来阻止事件的继续传播。而在IE浏览器中，则需要设置事件对象的cancelBubble属性为true。当前DOM事件规范草案还定义了另一个方法sImmediatePropagation()，这个方法除了阻止事件的进一步传播外，还阻止了相同对象上其他事件处理程序的调用。

示例代码（阻止冒泡）：

```javascript

function sHandler(event) {

window.event ? window.event.cancelBubble = true : event.stopPropagation(); // 兼容IE和其他浏览器

}

```

需要注意的是，使用return false只能阻止事件的默认行为，而不能阻止事件冒泡。如果使用原生JavaScript，需要单独处理阻止冒泡的操作。

三、示例说明

为了更好地理解上述内容，以下是一个简单的示例。假设有一个div元素内部嵌套了一个ul元素，再嵌套一个li元素。当点击这些元素时，会触发相应的事件处理函数。如果希望阻止事件的冒泡，可以在li元素的事件处理函数中调用上述的sHandler函数。这样，点击li元素时，只会触发li元素的事件处理函数，而不会触发ul和div元素的事件处理函数。

本文详细介绍了如何使用原生JavaScript取消事件的默认操作和阻止事件冒泡。通过示例代码和说明，希望能让读者更好地理解和掌握这些内容。在实际开发中，可以根据具体的需求和场景选择合适的方法来处理事件。