阻止事件冒泡的方法
首先看看事件冒泡是什么？
事件冒泡代码结构上嵌套，在直系关系中；同一个事件绑定多个元素（子元素，父元素…都绑定该事件），从子元素到父元素依次触发事件。
代码很简单，就是三个父子关系的div,然后分别加了点击事件。阻止冒泡。
css样式代码
<style>
.wrap {
width: 400px;
height: 400px;
background: red;
}
.box {
width: 300px;
height: 300px;
background: greenyellow;
margin-left: 300px;
}
.btn {
width: 200px;
height: 200px;
margin-left: 500px;
background: blue;
}
</style>
html标签代码
<body>
<div class="wrap">
<div class="box">
<div class="btn"></div>
</div>
</div>
</body>
注意：一个元素对象；绑定一个事件；那有就只有一个事件模型；要么冒泡要么捕获
js代码块
<script>
var wrap = document.getElementsByTagName('div')[0]
var box = document.getElementsByTagName('div')[1]
var btn = document.getElementsByTagName('div')[2]
function addEvent(el, type, handle, bool) {
// addEventlistener attachEvent
if (el.addEventlistener) { // 非IE 9以上
el.addEventlistener(type, handle, bool)
} else if (el.attachEvent) {
el.attachEvent('on' + type, function () {
handle.call(el) // 改变this 指向；由默认的window变为当前的对象
}, bool)
} else { // 直接给元素对象绑定事件
el['on' + type] = handle
}
}
addEvent(wrap, 'click', function (e) {
console.log('wrap')
wrap.style.background = 'black';
stop(e)
}, false)
addEvent(box, 'click', function (e) {
console.log('box')
box.style.background = 'black'
stop(e)
}, false)
addEvent(btn, 'click', function (e) {
console.log('btn')
btn.style.background = 'black'
stop(e)
}, false)
// 阻止冒泡方法封装
function stop(e){
e = e || window.event
if (e.stopPropagation) {
// 这里的e = 形参e
e.stopPropagation()
} else { // IE9以下
// 这里的 e = window.event
// 阻止默认时间 true阻止；false不阻止
e.cancelBubble = true;
}
}
</script>
不说了，运行一下啊，看看触发效果。