阻止冒泡_阻止冒泡事件 - CSDN
精华内容
参与话题
  • 阻止冒泡相关的三种方法

    千次阅读 2017-05-08 10:43:18
    1.event.stopPropagation();...事件处理过程中,阻止了事件冒泡,也阻止了默认行为还有一种有冒泡有关的: 3.event.preventDefault(); 它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为

    1.event.stopPropagation();
    事件处理过程中,阻止了事件冒泡,但不会阻击默认行为

    2.return false;
    事件处理过程中,阻止了事件冒泡,也阻止了默认行为

    还有一种有冒泡有关的:
    3.event.preventDefault();
    它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为

    展开全文
  • 阻止冒泡

    2020-06-02 19:39:47
    阻止冒泡的两种方式 事件冒泡:开始时由最具体的元素接受,然后逐级向上传播到DOM最顶层节点。 e.stopPropagation(); && e.cancelBubble=true; 阻止冒泡 <!DOCTYPE html> <html lang="en"> <...

    阻止冒泡的两种方式

    事件冒泡:开始时由最具体的元素接受,然后逐级向上传播到DOM最顶层节点。

    e.stopPropagation(); && e.cancelBubble=true; 阻止冒泡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
    		*{margin:0;padding:0;}
    		.father{width:400px;height:400px;background:pink;margin:50px auto 0;}
    		.son{width:200px;height:200px;background:#454554;}
    		</style>
    </head>
    <body>
    	<div class="father">
    		<div class="son"></div>
    	</div>
    	<script>
    		var son=document.querySelector(".son");
    		var father=document.querySelector(".father");
    		//addEventListener()  第三个参数为true 是捕获 为false 是冒泡
    		son.addEventListener("click",function(e){
    			alert("son");
    			// e.stopPropagation();//阻止冒泡	
    			// e.cancelBubble=true;//阻止冒泡 非标准
    			//阻止事件冒泡的兼容性解决方案
    			if(e && e.stopPropagation){
    				e.stopPropation();
    			}else{
    				window.event.cancelBubble=true;
    			}
    
    		},false);
    		father.addEventListener('click',function(e){
    			alert("father")
    		},false);
    		
    	</script>
    </body>
    </html>
    
    展开全文
  • js阻止事件冒泡

    万次阅读 2019-07-06 12:43:34
    js阻止事件冒泡 冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。 方法一:event.stopPropagation( ); 例如: <div> <p>段落文本内容 <input type=...

    冒泡事件简介

    当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。

    方法一:event.stopPropagation( );

    例如:

    <div>
        <p>段落文本内容
            <input type="button" value="点击" />
        </p>
    </div>
    

    html代码:

    // 为所有div元素绑定click事件
    $("div").click( function(event){
        alert("div-click");
    } );
    
    //为所有p元素绑定click事件
    $("p").click( function(event){
        alert("p-click");
    } );
    
    //为所有button元素绑定click事件
    $(":button").click( function(event){
        alert("button-click");
        // 阻止事件冒泡到DOM树上
        event.stopPropagation(); // 只执行button的click,如果注释掉该行,将执行button、p和div的click   
    } );
    
    方法二:event.target

    现在,事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:

    $(document).ready(function(){
     $('#switcher').click(function(event){
      $('#switcher .button').toggleClass('hidden');
      })
     })
      
    $(document).ready(function(){
     $('#switcher').click(function(event){
      if(event.target==this){
      $('#switcher .button').toggleClass('hidden');
      }
      })
     })
    

    此时的代码确保了被单击的元素是

    ,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击边框则会触发折叠操作。但是,单击标签同样什么也不会发生,因为它也是一个后代元素。实际上,我们可以不把检查代码放在这里,而是通过修改按钮的行为来达到目标 。

    阻止事件

    1.event.stopPropagation(); // 阻止了事件冒泡,但不会阻击默认行为
    2.return false; //阻止全部事件
    3.event.preventDefault(); //阻止默认事件
    展开全文
  • 阻止事件冒泡

    2018-08-23 18:16:28
    在子元素的点击事件中添加如下代码:"event.stopPropagation();" onclick="rodd('+o.id+');event.stopPropagation();"  

    在子元素的点击事件中添加如下代码:"event.stopPropagation();"

    onclick="rodd('+o.id+');event.stopPropagation();"

     

    展开全文
  • 阻止事件冒泡的方法

    千次阅读 2019-02-22 15:45:52
    html结构: &amp;lt;body&amp;gt; &amp;lt;form id=&quot;form1&quot; runat=&quot;server&quot;&amp;gt; &amp;lt;div id=&quot;divOne&quot; onclick=&...
  • 如何阻止事件冒泡与默认事件?

    千次阅读 2018-07-31 15:58:07
    【修真院小课堂】——如何阻止时间冒泡冒泡与默认事件 目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍 1.什么是事件? 事件是文档或浏览器...
  • 提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流。第一部分:事件冒泡 即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。 下面举...
  • 阻止冒泡事件的三种方法总结

    千次阅读 2017-09-27 15:32:20
     事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)   2.return false;  事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)   ...
  • 关于js阻止冒泡时的一些坑

    千次阅读 2018-08-08 11:45:38
    前提:这两天在用datatable做列表,点击列表行显示详情,就会涉及到阻止冒泡的问题,话不多说直接上代码,大概思路就是先获取到事件,然后阻止它。 //得到事件 function getEvent() { if (window.event) { ...
  • antd的Dropdown组件阻止事件冒泡

    万次阅读 2019-08-01 15:52:48
    阻止事件冒泡就是使用event对象的stopPropagation()方法。 Dropdown组件想要把每一个阻止事件冒泡就这样写: <Dropdown overlay={ <Menu> <Menu.Item onClick={eve => { // 修改要做....
  • uniapp 点击阻止冒泡

    千次阅读 2019-07-11 15:50:23
    阻止冒泡事件 在使用Uniapp编写的过程中写弹窗时会发现,你给背景设置了点击收起弹窗的状态又给弹窗中提交事件设置了关闭的状态,会发现事件还没执行完弹窗就被收起,很苦恼,但是官方给我们提供了一种全端都使用的...
  • 一、阻止事件冒泡方法: 在vue中,一般情况下我们是这样绑定事件方法的: <div class="parent-wrapper" @click="clickWrapper">点这里</div> @click=“事件名”,这是常规方法,但是如果需要阻止...
  • 阻止小程序冒泡的三种方法

    万次阅读 2018-10-17 08:36:51
    1.直接用方法 :catchtouchmove="preventD" &lt;view class="selector-bj {{isTapSelector ? '' : 'is-focus-selector' }}" wx:if="{{selectorBj}}" bindtap='tapSeleBj' ...
  • 微信小程序阻止点击事件冒泡行为

    千次阅读 2019-03-15 18:44:04
    将事件的 bind 改成 catch bind 是阻止不了冒泡的,catch 可以阻止事件的冒泡行为 例如 bindtap 改成 catchtap
  • css阻止事件冒泡

    千次阅读 2018-10-24 10:37:03
    pointer-events: none;
  • 小程序阻止事件冒泡

    千次阅读 2017-09-07 14:21:00
    使用bind的绑定事件,是可以触发冒泡事件的,就是可以触发父view的事件,使用catch是不会触发冒泡事件
  • 微信小程序:冒泡事件及其阻止

    万次阅读 2018-05-08 16:05:05
    事件的类别分为几种: ... 长按事件:longtap  触摸事件:touchstart; touchend;...其中前三类是冒泡事件,其他的称为非冒泡事件。 写一个简单的例子,代码就不一一贴出来了,WXML的文件如下: 红色
  • js阻止事件冒泡的两种方法

    万次阅读 2017-02-04 10:23:32
    一、冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。 方法一:event.stopPropagation( ); 例如:  段落文本内容  type="button" value="点击" />   html...
  • JQuery阻止(默认)事件冒泡

    千次阅读 2018-06-15 10:27:41
    1.事件冒泡 事件冒泡就是,你在执行元素点击事件的时候同时也... 阻止事件冒泡:even.stopPropagation();//不触发除本身之外的其他任何控件的事件 【案例】 定义两个div,第一个div里嵌套一个span标签,没以个di...
  • vue.js阻止事件冒泡和默认事件

    万次阅读 2017-09-27 18:23:32
    首先我们来看原生JS取消事件冒泡方法:e.stopPropagation(); //非IE浏览器 window.event.cancelBubble = true; //IE浏览器原生JS阻止默认事件方法:e.preventDefault(); //非IE浏览器 window.event.returnValue = ...
1 2 3 4 5 ... 20
收藏数 33,488
精华内容 13,395
关键字:

阻止冒泡