事件冒泡:子元素的onclick事件 触发完会传导到父元素的onclick事件去.
所谓的冒泡:指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发 在开发中大部分冒泡是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
一、用以下例子演示:其中 <li> 是 <a> 的子元素
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
}
ul li {
height: 30px;
line-height: 30px;
font-size: 18px
}
</style>
</head>
<body>
<ul>
<a href="javascript:void(0)" onclick="go()"><li>这是一条新闻一<button type="button" onclick="del(event)">X</button></li></a>
<a href="javascript:void(0)" onclick="go()"><li>这是一条新闻二<button type="button" onclick="del(event)">X</button></li></a>
<a href="javascript:void(0)" onclick="go()"><li>这是一条新闻三<button type="button" onclick="del(event)">X</button></li></a>
</ul>
</body>
二、脚本函数实现:go() 与 del(event)
<script>
function del(e){
console.log(e)
console.log('已经删除...')
}
function go(){
console.log("正在跳转")
}
</script>
三、此时会出现的效果就叫做事件冒泡,运行结果演示如下:
点击父类<a>标签的新闻一:
点击子类<li> 标签的X: 会发现同时显示了父类的 onclick “正在跳转”
四、阻止事件冒泡 e.stopPropagation() 或者 e.cancelBubble = true;
<script>
function del(e){
console.log(e)
e.stopPropagation() //加上此句话 阻止元素冒泡事件
console.log('已经删除...')
}
function go(){
console.log("正在跳转")
}
</script>
效果如下:
点击父类<a>标签的新闻一:
点击子类<li> 标签的X: