【工作笔记】点击div中的内部元素，防止事件冒泡

最新推荐文章于 2023-04-27 14:49:27 发布

戴璟昊

最新推荐文章于 2023-04-27 14:49:27 发布

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签：工作需求

本文链接：https://blog.csdn.net/dairongliang123/article/details/78249199

版权

JavaScript 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

工作中遇到的一个需求，点击外部div跳转页面，点击div中的某个内部元素，跳转到另一个页面，之前没有处理过这种问题，上网查找了一些资料了解到，这里面涉及到事件的冒泡机制：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction1(event){
	event = event ? event : window.event;
 	event.cancelBubble = true;
	alert("inner1");
}
function myFunction2(event){
	event.stopPropagation();
	alert("inner2");
}
function myFunction3(){
	alert("inner3");
}
function showFun(){
    alert("out");
}
</script>
</head>
<body>

<p>单击按钮触发函数。</p>
<div οnclick="showFun()" style="background:red;width:20%;">	
   <button style="margin-left:30%;" οnclick="myFunction1(event)">but1</button><br>
   <button style="margin-left:30%;" οnclick="myFunction2(event)">but2</button><br>
   <button style="margin-left:30%;" οnclick="myFunction3()">but3</button>
</div>
</body>
</html>

页面运行如下：