精华内容
下载资源
问答
  • 进用vue写阻止事件冒泡的时候,想了一下用JS怎么写,然后想不起来了,记一下。 HTML中: <div onclick="clickOneTime(arguments(0))"></div> <script> function clickOneTime(e) { var evt = e ...

    进用vue写阻止事件冒泡的时候,想了一下用JS怎么写,然后想不起来了,记一下。
    HTML中:

    <div onclick="clickOneTime(arguments(0))"></div>
    
    <script>
    function clickOneTime(e) {
      var evt = e || window.event;
      //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
      evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble=true);
    }
    </script>
    
    展开全文
  • 原生js如何阻止事件冒泡

    千次阅读 2019-03-29 08:10:44
    我们只点击了最里面的那个div,但是在他的父级及以上div身上所绑定的事件都被...阻止浏览器的这种事件处理机制呢? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
    我们只点击了最里面的那个div,但是在他的父级及以上div身上所绑定的事件都被触发了,这显
    然不是我们想要的结果,我们实际需求是只想要触发点击的那个div上绑定的事件,我们该如何
    阻止浏览器的这种事件处理机制呢?
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        #info {
          width: 500px;
          height: 500px;
          background: blue;
        }
        .box-1 {
          width: 400px;
          height: 400px;
          background: red;
        }
        .box-2 {
          width: 300px;
          height: 300px;
          background: yellow;
        }
        .box-3 {
          width: 200px;
          height: 200px;
          background: orange;
        }
        .box-4 {
          width: 100px;
          height: 100px;
          background: pink;
        }
      </style>
    </head>
    <body>
    <div id="info">
      <div class="box-1">
        最外层
        <div class="box-2">
          第二层
          <div class="box-3">
            第三层
            <div class="box-4">最底</div>
          </div>
        </div>
      </div>
    </div>
      <script>
        window.onload = function () {
          let info = document.getElementById('info')
          let box1 = document.querySelector('.box-1')
          let box2 = document.querySelector('.box-2')
          let box3 = document.querySelector('.box-3')
          let bubbles = document.querySelector('.box-4')
          
          bubbles.onclick = function (e) {
            var ev = e || window.event;
            if(ev && ev.stopPropagation) {
              //非IE浏览器
              ev.stopPropagation();
            } else {
              //IE浏览器(IE11以下)
              ev.cancelBubble = true;
            }
            console.log("最底层盒子被点击了")
          }
          box3.onclick = function (e) {
            var ev = e || window.event;
            if(ev && ev.stopPropagation) {
              //非IE浏览器
              ev.stopPropagation();
            } else {
              //IE浏览器(IE11以下)
              ev.cancelBubble = true;
            }
            console.log("第三个盒子被点击了")
          }
          box2.onclick = function (e) {
            var ev = e || window.event;
            if(ev && ev.stopPropagation) {
              //非IE浏览器
              ev.stopPropagation();
            } else {
              //IE浏览器(IE11以下)
              ev.cancelBubble = true;
            }
            console.log("第二个盒子被点击了")
          }
          box1.onclick = function (e) {
            var ev = e || window.event;
            if(ev && ev.stopPropagation) {
              //非IE浏览器
              ev.stopPropagation();
            } else {
              //IE浏览器(IE11以下)
              ev.cancelBubble = true;
            }
            console.log("第一个盒子被点击了")
          }
        }
        //以上写法就可以阻止事件的冒泡 每个盒子都只能打印一次 
      </script>
    </body>
    </html>
    复制代码

    转载于:https://juejin.im/post/5c9dd1106fb9a05e2a300cf1

    展开全文
  • vue原生实现右键菜单 在浏览器当中右键默认

    vue和原生js阻止冒泡和默认事件

    其几天看文章的时候看到了这样一句话,不上代码空谈理论的都是老流氓,咱还是实实在在的分享一些东西,如有错误,欢迎评论指正。

    肯定这里少不了提到什么是冒泡?什么是捕获?

    冒泡阶段: 事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止。

    (这个解释太官方,我理解的就是说有n个同心圆,当我们用手指点击第一个的时候,会依次触发下边的所有的同心圆,知道最后document)

    捕获阶段: 事件捕获会从document开始触发,一级一级往下传递,依次触发,直到真正事件目标为止。

    (同样白话解释一下,和冒泡相反,同样的n个同心圆,当手指点击第一个时候,会从最下边依次往上触发,直到第一个也就是我们的目标触发)

    默认事件: 比较通俗易懂了,就是本身带有的事件,比如我们浏览器中右键默认弹出菜单等等

    我们今天的议题是如何解决阻止默认事件和取消事件冒泡
    我们原生js也可以,我们的vue也可以,今天写两个版本,简单

    原生js取消事件冒泡

    在原生js中防止冒泡和捕获中是区分不同的浏览器的
    w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

    下面我们用两种方法写取消冒泡事件,一种是try catch,一种是判断

    try{
            e.stopPropagation();//非IE浏览器
        }
        catch(e){
            window.event.cancelBubble = true;//IE浏览器
        }
    
    function stopBubble(e) { //这里是传入的事件$event
    //如果提供了事件对象,则这是一个非IE浏览器 
    	if ( e && e.stopPropagation ) 
        			//因此它支持W3C的stopPropagation()方法 
       		e.stopPropagation(); 
    	else 
      			  //否则,我们需要使用IE的方式来取消事件冒泡 
       		window.event.cancelBubble = true; 
    }
    

    原生js阻止默认事件

    取消默认事件
    w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;
    preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接a标签,提交按钮等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

    function(e){
    if ( e && e.preventDefault ) {
                e.preventDefault()//非IE浏览器
    } else { window.event.returnValue = false;  //IE浏览器
    }
    }
    

    那么对于vue解决就很容易了

    vue.js取消事件冒泡

    <div @click.stop="doSomething($event)">vue取消事件冒泡</div>
    

    vue.js阻止默认事件

    <div @click.prevent="doSomething($event)">vue阻止默认事件</div>
    

    那么我看这里的时候有有点疑惑就是prevent和stop很清晰明了是阻止默认事件和取消事件冒泡的,但是后边为什么还跟着一个方法?

    <!--不阻止右键菜单(浏览器行为),右键执行函数show-->
    <input type="button" value="按钮" @contextmenu="show()">
    <!--阻止右键菜单-->
    <input type="button" value="按钮1" @contextmenu.prevent>
    <!--阻止右键菜单(浏览器行为),右键执行函数show-->
    <input type="button" value="按钮1" @contextmenu.prevent="show1()">
    

    我也是查了下,具体右键事件具体分析,其实这个方法表示阻止了原来的默认事件,但是执行后边的方法,也就是此时右键为show1事件!

    好了内容不在于多,在于精,这也是为下次写原生的组件右键浏览器任意位置跳出菜单做预热一下吧!
    还是那句话,每天进步一点点,积少成多,必成大器!

    展开全文
  • 如何阻止事件冒泡,这里先拓展个知识点: DOM事件流存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。 DOM标准事件流的触发的先后顺序为:先捕获再冒泡。即当触发dom事件时,会先进行事件捕获,捕获到事件...

    如何阻止事件冒泡,这里先拓展个知识点:

    • DOM事件流存在三个阶段:事件捕获阶段处于目标阶段事件冒泡阶段
    • DOM标准事件流的触发的先后顺序为:先捕获再冒泡。即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现,IE10及以下不支持捕获型事件,所以就少了一个事件捕获阶段,IE11ChromeFirefoxSafari等浏览器则同时存在。

    冒泡事件

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

     <div id="box">
        <div class="title">
          <div class="title_t"></div>
          <div class="title_b">
            <p class="names">YY</p>
          </div>
          <div class="book">
            <p class="days"></p>
            <a class="delete">×</a>
            <span class="study">努力学习,天天向上</span>
          </div>
        </div>
      </div>
    
    // 点击弹框
    box.onclick = function (event) { // 父控件
          alert("父控件");  
    }
    // 点击删除时 ×
    dele.onclick = function () {   // 子控件
          alert("子控件");     
    }
    

    什么是冒泡事件?当我们点击子控件时,父控件也会响应并弹框,最后会分别弹出“子控件”、“父控件”。

    阻止事件冒泡

    W3C的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true。
    stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为,stopPropagation就是阻止目标元素的事件冒泡到父级元素。为了实现浏览器兼容性,我们可以这样写:

       // 阻止事件冒泡
       window.event ? window.event.cancelBubble = true : event.stopPropagation();
    

    如果你想在点击子控件后父控件不会弹框,那么我们直接加在子控件中,例如:
    在这里插入图片描述

    阻止默认事件

    • preventDefault
    • return false

    1.preventDefault它是事件对象的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如a标签,提交按钮submit等。当事件对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的。

    我们都知道,点击a标签的默认跳转到指定页面,这时,我们利用preventDefault阻止它的跳转:

    <a href="http://www.baidu.com/" id="text" >百度一下,我就知道</a>
    
    var text = document.getElementById("text");
    text.onclick =function(event){
    	//阻止默认行为
    	event.preventDefault();
    }
    

    2.现在很多JS代码都直接使用JQuery来写,在JQuery中使用return false时,相当于同时使用event.preventDefault和event.stopPropagation,它会阻止冒泡也会阻止默认行为。 但是使用原生js写时,return false只会阻止默认行为。举例来说:

    <div id='box'  onclick='alert("hello world!");'>
        <div  onclick='alert("你好 世界");'>
         <a href="http://www.baidu.com/" id="text" >百度一下,我就知道</a>
        </div>
    </div>
    
    var text = document.getElementById("text");
    text.onclick = function(){
     	return false;
    };
    
    • 使用原生js方法时,return false只能阻止默认行为,但却不能阻止冒泡。

    • 使用jQuery方法时,return false会阻止默认行为,也会阻止冒泡。

    $("#text").on('click',function(){
     return false;
    });
    
    展开全文
  • 事件冒泡,可能有些同学还不是很清楚,什么是事件冒泡?来看个简单例子。 &lt;div onclick="alert('最外层')"&gt; &lt;div onclick="alert('中间层')"&gt; &lt;a id=&...
  • JS阻止冒泡事件的三种方法

    千次阅读 2019-07-17 15:11:47
    冒泡事件:比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。 <div class="box"> <button class="btn">按钮</button> </div> <...
  • 原生js阻止冒泡,兼容写法

    千次阅读 2018-05-28 15:49:30
    js:var $item = document.getElementById('item'); $item.onclick = function (e) {//阻止冒泡 if (e) { e.stopPropagation(); e.preventDefault(); } else { ...
  • 原生JS阻止冒泡

    2016-08-21 15:08:59
    1、阻止冒泡  function stopProp(e){  // 获得event 对象 并处理兼容  var ev = e || window.event;  if( ev.stopPropagation ){  ev.stopPropagation(); // 普通浏览器
  • //弹出框消失 cancelShade(){ this.refs.shadeDiv.style.display="none" console.log(2) } keepShade(event){ console.log(1) event.preventDefault(); // 阻止默认事件
  • if(e.preventDefault){ e.preventDefault() }else{ window.event.returnValue = false //兼容IE6、7、8 } alert("阻止了默认事件") } </script> </html> 阻止事件冒泡: e.stopPropagation() //w3c写法 window.event...
  • 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } catch(e){ window.event.cancelBubble = true;//IE浏览器 } 原生js阻止默认事件 if ( e && e.preventDefault...
  • 原生js、jQuery、vue.js、react 阻止事件冒泡 一、什么是事件冒泡 一条鱼往上吐泡泡,这个泡泡就是事件,一直往上冒的过程中去把它经过的所有元素,只要这个元素身上有相同事件,就会去执行该元素的该事件,没有相同...
  • JavaScript 有三种方法,可以为事件绑定监听函数。 HTML 的 on- 属性 HTML 语言允许在元素的属性中,直接定义某些事件的监听代码。 <body onload="doSomething()"> <div onclick="console.log('触发事件')
  • vue中阻止事件冒泡

    2021-09-06 16:24:05
    vue阻止事件冒泡 问题描述: 使用的element-ui的dialog对话框,在对话框的父组件还有点击事件,点击dialog对话框时也会相应外部父组件的点击事件。 <el-dialog title="提示" :visible.sync="dialogVisible" ...
  • JS阻止事件冒泡和默认事件

    千次阅读 2019-01-15 17:54:26
    什么是事件冒泡? 当事件发生后,这个事件就要开始传播(从里到外,或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,... 我们经常利用事件冒泡机制去减少给DOM添加过多的绑定事件...
  • 一、源码 // 源码—start &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&...IFE JavaScript Task 01&amp;amp;lt;/title&
  • 如何阻止事件冒泡和浏览器默认事件事件捕获和冒泡的过程统称为事件的传播事件的传播是可以阻止的:在W3c中,使用stopPropagation()方法在IE下设置cancelBubble = true;在捕获的过程中stopPropagation();后,...
  • 来源 |https://www.cnblogs.com/Wayou/p/react_event_issue.html在正式开始前,先来看看 js事件的触发与事件处理器的执行。js...
  • 一 函数 1、字符串函数 ... 阻止冒泡:   window.event ? window.event.cancelBubble = true : e.stopPropagation();   转载于:https://www.cnblogs.com/Tanghongchang/p/6664642.html
  • 1.事件冒泡、捕获 事件冒泡: 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上) 事件捕获: 结构上(非视觉上)嵌套关系的元素,会存在...2.取消冒泡事件 ...
  • js事件冒泡机制,以及如何阻止冒泡

    千次阅读 2018-05-11 22:01:25
    js阻止冒泡:当前要阻止冒泡事件函数中调用 。必须要同一个事件才行。例如:mousedown,不能用onclick 浏览器的默认行为:右键、按住左键选中、a标签是html默认点击事件,取消:<a href="javascript:;"></a...
  • 阻止事件冒泡"/> (this,event);" style="width:100px; height:100px; background:#000; padding:50px"> (this,event);" style="width:100px; height:100px; background:#CCC"> ...
  • 如果两个相互嵌套的js节点同时注册有相同的事件的话,便会同时出发两个事件,可是往往需要的是一个节点的事件触发,可以阻止事件冒泡,仅仅出发一个函数。例子如下: 1. 对于原生JS function stopBubble(e){ ...
  • vue阻止冒泡: <div @click.stop='demoFun'></div> react阻止冒泡:(懒得写了,直接上其他人的) https://zhuanlan.zhihu.com/p/26742034 jquery阻...
  • 阻止事件冒泡的方法

    2016-11-17 12:06:57
    在我们想执行点击事件的时候,通常是想让点击某个元素的时候执行某个事件,而冒泡事件就是指在点击这个元素的时候执行了这个事件,而同时它的父元素也执行了这个事件。 如下面的代码: <a href="javascript:;">...
  • 事件冒泡:html元素是...阻止冒泡事件: e.stopPropagation(); 默认事件: a标签的跳转事件就是默认事件 阻止默认事件: e.preventDefault();   <!DOCTYPE html> <html lang="en"> <hea...
  • js事件冒泡

    万次阅读 多人点赞 2018-09-09 18:49:42
    当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的...因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,772
精华内容 3,508
关键字:

原生js阻止事件冒泡