阻止冒泡事件

编程之家收集整理的这篇文章主要介绍了阻止冒泡事件编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<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>

比如上面这个页面

分为三层: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事件中,点击“点击我”。

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

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

总结

以上是编程之家为你收集整理的阻止冒泡事件全部内容,希望文章能够帮你解决阻止冒泡事件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的jQuery相关文章

最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录。 下面是嵌套js的html文件: 效果图: 以下是放在服务器的有关地名xml文件:
1 无穷滚动(无限加载)与分页的比较 现在越来越多的网站或者博客的列表页开始抛弃传统的分页技术,大致的原因在于,分页明显地增加了用户的操作行为以及页面加载等待的时间,而网页浏览者往往没什么耐心。 而无
此前在浏览一些网站的时候,发现他们网站的图片都是你“鼠标”滚到哪,图片才会加载显示。当时觉得好神奇,怎么会这么“跟手”呢。核心原理是:1 设置一个定时器,计算每张图片是否会随着滚动条的滚动,而出现在视
1.开关灯效果 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;U
什么是事件冒泡 &lt;div &quot;width: 200px;height: 200px;background: red;margin: 200px auto;&quot; onc
Allot Transfer $(document).ready(function() { $(&#39;input[type=radio][name=bedStatus]&#39;).change(
目录验证码实现效果如下:生成验证码的方法:生成验证码随机背景颜色在html中引用完整源码下载地址:验证码实现效果如下:生成验证码的方法:function code_draw() { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document.getElementById("canvas"); //获取到canvas
比如info是一个字符串变量,如果需要去该变量的值,需要使用下面的语句:语法:alert($(&quot;#&quot;+id).val());例如:使用id设置隐藏控件 $(&quot;.img&quot;).mouseover(function(event){ var html=event.target.innerHTML; //alert(html); var aid=html.match(/&amp;lt;a id=&quot;(...
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注