您的位置：首页 > 其它

事件代理中冒泡带来的问题----触发根元素自己的事件

2016-06-30 15:37 316 查看

前面我说了一下事件代理，很方便和高效，但是，例子中回避了一个问题，先看看下面这个事件代理的例子，和之前的是一样的：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css" rel="stylesheet">
body,ul{
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
width: 750px;
margin: 0 auto;
background-color: #5f9ea0;
}
li{
width: 200px;
height: 200px;
margin: 20px;
text-align: center;
display: inline-block;
background-color: grey;
cursor: pointer;
}
span{
display: inline-block;
width: 100px;
margin: 10px;
padding: 20px;
background-color: #2a4f30;
color: #ffffff;
cursor: pointer;
}
</style>
</head>
<body>

<ul id="newHouse">
<li><span>上午</span></li>
<li><span>中午</span></li>
<li><span>下午</span></li>
</ul>

</body>
<script type="text/javascript">
var newHouse = document.getElementById('newHouse');
newHouse.onclick = function(e){
var e = e || window.event;
var myTarget = e.target || e.srcElement;
if(myTarget.nodeName.toLowerCase() == "span"){
console.log(myTarget.nodeName+'，这里应该只打印元素span');
}else if(myTarget.nodeName.toLowerCase() == "li"){
console.log(myTarget.nodeName+'，这里应该是打印元素li');
};
}
</script>
</html>

这里我们将li和span的打印事件代理给了ul，这样是可行的，但前提是ul自身没有点击事件，否则通过冒泡，会触发ul自己的点击事件，有些情况下这是我们不想看到的，看一下实际的例子：

<script type="text/javascript">
var newHouse = document.getElementById('newHouse');
newHouse.onclick = function(e){
var e = e || window.event;
var myTarget = e.target || e.srcElement;
if(myTarget.nodeName.toLowerCase() == "span"){
console.log(myTarget.nodeName+'，这里应该只打印元素span');
}else if(myTarget.nodeName.toLowerCase() == "li"){
console.log(myTarget.nodeName+'，这里应该是打印元素li');
};
};
/*下面是ul自己的点击事件*/
newHouse.addEventListener('click',function(e){
console.log('触发了ul的点击事件');
});

</script>

我在原先的js代码下面给ul绑定了一个属于它自己的点击事件，现在来看效果：

我点击了一下绿色背景的span元素，但是控制台打印了两次，一次是事件代理中span元素的打印事件，另一次是ul自身绑定的打印事件，这是事件冒泡产生的结果，那么如何做到点击span或是li的时候，不触发ul自己的事件呢？我在ul自己的事件里面，这样做了一个判断：

newHouse.addEventListener('click',function(e){
if(e.target == e.currentTarget){
console.log('我是根元素ul的点击事件');
}
});这样其实仍然是触发了ul的点击事件，但是却阻止了它的执行程序，我想，也许有一种通过阻止冒泡彻底阻止ul的事件的方法，但是我至今也没能做成功，期待高手赐教！

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

标签：

相关文章推荐

新的分享

章节导航