百搜论坛欢迎您的加入!
adimg adimg
 
昨日:篇  今日:篇   总帖:篇   会员:
CRMEBLv12 
js阻止事件冒泡     

原文链接:http://github.crmeb.net/u/defu

<body>

  <form id="form1" runat="server">

    <div id="divOne" onclick="alert('我是最外层');">

      <div id="divTwo" onclick="alert('我是中间层!')">

        <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com"onclick="alert('我是最里层!')">点击我</a>

      </div>

    </div>

  </form>

</body>

 

比如上面这个页面,


分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;


他们都有各自的click事件,最里层a标签还有href属性。


 


运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层


---->然后再链接到百度.


 


这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。


事件冒泡过程(以标签ID表示):hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。


 


如何来阻止?


1.event.stopPropagation(); 


 <script type="text/javascript">

        $(function() {

            $("#hr_three").click(function(event) {

                event.stopPropagation();

            });

        });

<script>


再点击“点击我”,会弹出:我是最里层,然后链接到百度


 


 2.return false;


如果头部加入的是以下代码


<script type="text/javascript">

$(function() {

  $("#hr_three").click(function(event) {

    return false;

  });

});

<script> 

再点击“点击我”,会弹出:我是最里层,但不会执行链接到百度页面


 


由此可以看出:


1.event.stopPropagation(); 


   事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)


 


2.return false;


   事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)


 


还有一种有冒泡有关的:


3.event.preventDefault(); 


   如果把它放在头部A标签的click事件中,点击“点击我”。


   会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度


   它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)



详细教程:http://github.crmeb.net/u/defu

 0  已被阅读了1409次  楼主 2021-04-09 14:00:21
回复列表

回复:js阻止事件冒泡

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:18.118.1.158,2024-04-28 16:49:47,Processed in 0.01672 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.9
已有0次打赏
(0) 分享
分享
取消
免责声明
1、本站资源,均来自网络,版权归原作者,所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途,否则,一切责任由该用户承担 !
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党,拿走请回复,尊重楼主,尊重你我他~

侵权删除请致信 E-Mail:207882320@qq.com