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

WEB前端 waitig 477℃ 百度已收录 0评论

工作中遇到的一个需求,点击外部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 onclick="showFun()" style="background:red;width:20%;">	
   <button style="margin-left:30%;" onclick="myFunction1(event)">but1</button><br>
   <button style="margin-left:30%;" onclick="myFunction2(event)">but2</button><br>
   <button style="margin-left:30%;" onclick="myFunction3()">but3</button>
</div>
</body>
</html>

页面运行如下:

点击div红色区域,输出

点击but1按钮,输出

点击but2按钮,输出

点击but3按钮,先后输出

详细可参考:

http://www.360doc.com/content/14/0724/15/13883922_396743210.shtml


本文由【waitig】发表在等英博客
本文固定链接:【工作笔记】点击div中的内部元素,防止事件冒泡
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)