您的位置:首页> 日志> 前端技术 正文
DTOP

JS冒泡事件及处理

chenke | 2016年07月01日 |

>>收藏本文 已有 0条评论

一、何为冒泡事件

如果我们在网页中设定了多个div的嵌套,那就形成了父子关系,当父div与子 div共同加入了onclick事件时,如果我们触发了子div的onclick事件后,子div进行相应的js操作。但其父div的onclick事件 同样会被触发了。这就造成了事件的多层并发,导致错误。如下例中当点击“儿子A”时,会弹出“爸爸A”。但我们的意愿是只弹出”儿子A”

二、消除冒泡事件的方法
阻止JS事件冒泡传递的方法

cancelBubble :IE

stopPropagation:非IE

 

三、HTML代码

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

</head>

<body>

 

<div id="parentA" onclick="alert(this.id)"> 爸爸A

  <div id="childA" onclick="alert(this.id)">儿子A</div>

</div>

 

<div id="parentB" onclick="alert(this.id)" > 爸爸B

  <div id="childB" onclick="stopDefault(this,event);">儿子B</div>

</div>

 

</body>

</html>

 

 

四、最简单的JS

<script type="text/javascript">

function stopDefault(obj,evt) {

alert(obj.id);

var e=(evt)?evt:window.event;

if (window.event) {

e.cancelBubble=true;

} else {

e.stopPropagation();

}

}

</script>

 

当点击”儿子B“时不会弹出”爸爸B“