<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>冒泡事件</title><script type="text/javascript" src="../js/jquery.js" ></script><script> $(function(){ $("#content span").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) $("#content").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) $("body").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) })</script></head><body> <div id="content"> <span>我来触发冒泡</span> </div> <div id="msg"></div></body></html>
上面的代码中当你单击span标签的时候就会触发#content和body的单击事件。这种情况称为冒泡事件。
要消除这种情况可以使用事件对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>冒泡事件</title><script type="text/javascript" src="../js/jquery.js" ></script><script> $(function(){ $("#content span").bind("click",function(event){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); event.stopPropagation(); }) $("#content").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) $("body").bind("click",function(){ var txt=$("#msg").html()+"冒泡事件"; $("#msg").html(txt); }) })</script></head><body> <div id="content"> <span>我来触发冒泡</span> </div> <div id="msg"></div></body></html>
在阻止默认的事件是可以使用
event.preventDefault() ;或者
return false;或者
event.stopPropagation();
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：剖析 Vue.js 内部运行机制 下一篇：全国110网上报警中心
