停止事件冒泡和阻止事件的默认行为

爱被打了一巴掌 2022-06-08 12:46 407阅读 0赞

# #

## 停止事件冒泡和阻止事件的默认行为 ##

“停止事件冒泡“和”阻止浏览器的默认行为“，这两个概念非常重要，它们对复杂的应用程序处理非常有用。

1.停止事件冒泡

停止事件冒泡是指，停止冒泡型事件的进一步传递（取消事件传递,不只是停止IE和DOM标准共有的冒泡型事件，我们还可以停止支持DOM标准浏览器的捕捉型事件，用topPropagation()方法）。例如上图中的冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。

2.阻止事件的默认行为

停止事件的默认行为是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。例如，如果表单中input type 属性是 “submit”，点击后在事件传播完浏览器就自动提交表单。又例如，input 元素的 keydown 事件发生并处理后，浏览器默认会将用户键入的字符自动追加到 input 元素的值中。

停止事件冒泡的处理方法：

在IE下,通过设置event对象的cancelBubble为true即可。

1 function someHandle() \{  
2   window.event.cancelBubble = true;  
3 \}

DOM标准通过调用event对象的stopPropagation()方法即可。

1 function someHandle(event) \{  
2   event.stopPropagation();  
3 \}

因些，跨浏览器的停止事件传递的方法是:

![复制代码][copycode.gif]

1 function someHandle(event) \{  
2   event = event || window.event;  
3   if(event.stopPropagation)\{  
4     event.stopPropagation();  
5   \}else \{  
6     event.cancelBubble = true;  
7   \}  
8 \}

![复制代码][copycode.gif]

阻止事件的默认行为的处理方法

就像事件模型和事件对象差异一样，在IE和其它所有浏览器中阻止事件的默认行为的方法也不同。

在IE下,通过设置event对象的returnValue为false即可。

1 function someHandle() \{  
2   window.event.returnValue = false;  
3 \}

DOM标准通过调用event对象的preventDefault()方法即可。

1 function someHandle(event) \{  
2   event.preventDefault();  
3 \}

因些，跨浏览器的取消事件传递后的默认处理方法是：

![复制代码][copycode.gif]

1 function someHandle(event) \{  
2   event = event || window.event;  
3   if(event.preventDefault)\{  
4     event.preventDefault();  
5   \}else\{  
6     event.returnValue = false;  
7   \}  
8 \}

![复制代码][copycode.gif]

完整的事件处理兼容性函数

![复制代码][copycode.gif]

1 var EventUtil = \{  
 2   addHandler: function(element, type, handler)\{  
 3     if (element.addEventListener)\{  
 4       element.addEventListener(type, handler, false);  
 5     \} else if (element.attachEvent)\{  
 6       element.attachEvent("on" + type, handler);  
 7     \} else \{  
 8       element\["on" + type\] = handler;  
 9     \}  
10   \},  
11   removeHandler: function(element, type, handler)\{  
12     if (element.removeEventListener)\{  
13       element.removeEventListener(type, handler, false);  
14     \} else if (element.detachEvent)\{  
15       element.detachEvent("on" + type, handler);  
16     \} else \{  
17       element\["on" + type\] = null;  
18     \}  
19   \},  
20   getEvent: function(event)\{  
21     return event ? event : window.event;  
22   \},  
23   getTarget: function(event)\{  
24     return event.target || event.srcElement;  
25   \},  
26   preventDefault: function(event)\{  
27     if (event.preventDefault)\{  
28       event.preventDefault();  
29     \} else \{  
30       event.returnValue = false;  
31     \}  
32   \},  
33   stopPropagation: function(event)\{  
34     if (event.stopPropagation)\{  
35       event.stopPropagation();  
36     \} else \{  
37       event.cancelBubble = true;  
38     \}  
39 \};

[copycode.gif]: /images/20220608/6379593a950b463cbf0c38208615b3f7.png