用JS阻止事件冒泡
2011-07-14 16:33
423 查看
事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。 可以用JS来阻止js事件冒泡。因为浏览器的差异IE和FF的JS写法有点不一样。
IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法。
下一下完整的代码:
IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法。
下一下完整的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function aaaclick(){ alert("td click"); } function bbbclick(evt){ alert("td click"); if (window.event) { event.cancelBubble = true; }else if (evt){ evt.stopPropagation(); } } function trclick(){ alert("tr click"); } function tableclick(){ alert("table click"); } </script> <style type="text/css"> <!-- .tab { border: 1px solid #0066FF; cellpadding:0px; cellspacing:0px; } .tab td{ border: 1px solid #0066FF; } --> </style> </head> <body> <p>点击aaaa会触发上层的onclick事件,点击bbbb不会触发上层onclick事件</p> <table width="204" onclick="tableclick()" class="tab"> <tr > <td width="96"> </td> <td width="96"> </td> </tr> <tr onclick="trclick()"> <td onclick="aaaclick()">aaaa</td> <td onclick="bbbclick(event)">bbbbb</td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> </html>
相关文章推荐
- JS阻止事件冒泡
- js冒泡、捕获事件及阻止冒泡方法详细总结
- JS阻止冒泡事件以及默认事件发生
- js利用事件的阻止冒泡实现点击空白模态框的隐藏
- js事件冒泡,默认行为,阻止冒泡
- js 阻止冒泡 在控件的 onxxx 事件中调用就可以阻止父控件也响应消息了
- Js 冒泡事件阻止
- js阻止事件冒泡
- Js 冒泡事件阻止
- js 兼容性之阻止事件冒泡传递
- js之事件冒泡和事件捕获及其阻止详细介绍
- Js 冒泡事件阻止
- JS阻止事件冒泡
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
- js 阻止事件冒泡
- js 阻止事件冒泡的两种方式的方法实例
- 【js】js阻止元素事件的冒泡
- js核心基础之Events事件机制(事件冒泡、事件捕获、事件执行顺序、阻止冒泡)
- js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
- js 事件冒泡详解、 捕获、阻止方法