您的位置：首页 > Web前端 > JavaScript

用JS阻止事件冒泡

2015-12-11 20:49 796 查看

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

可以用JS来阻止js事件冒泡。因为浏览器的差异IE和FF的JS写法有点不一样。

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">



</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航