首页 > 代码库 > js的冒泡和阻止默认行为
js的冒泡和阻止默认行为
stopPropagation 停止冒泡
preventDefault 阻止默认行为
return false 停止冒泡和阻止默认行为。
冒泡的执行顺序是由触发事件的元素往父级元素层层执行。
但是如果当前元素没有阻止默认行为，而父级元素阻止默认行为，那么默认行为也不会触发。
示例代码
<!DOCTYPE html><html><head> <title></title></head><body><div id="parent" style="width: 200px;height: 200px;border: 1px solid red;padding: 10px"> <span>parent</span> <div id="middle" style="border: 1px solid blue;padding: 10px;width: 160px;height: 100px"> <span>middle</span> <br/> <a href="http://www.mamicode.com/111.html" id="self" style="margin-left: 50px;margin-top: 20px">self</a> </div></div><label id="info"></label></body></html>
浏览器运行后：
定义事件
1、不阻止默认行为，不阻止冒泡
<script> $(document).ready(function(){ $("#parent").click(function(e){ console.log("parent is clicked!"); }); $("#middle").click(function(e){ console.log("middle is clicked!"); }); $("#self").click(function(e){ console.log("self is clicked!"); }); });</script>执行结果：
<script> $(document).ready(function(){ $("#parent").click(function(e){ e.preventDefault(); console.log("parent is clicked!"); }); $("#middle").click(function(e){ console.log("middle is clicked!"); }); $("#self").click(function(e){ console.log("self is clicked!"); }); });</script>执行结果：
<script> $(document).ready(function(){ $("#parent").click(function(e){ e.preventDefault(); console.log("parent is clicked!"); }); $("#middle").click(function(e){ console.log("middle is clicked!"); }); $("#self").click(function(e){ e.stopPropagation(); console.log("self is clicked!"); }); });</script>执行结果：
js的冒泡和阻止默认行为
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。