精华内容
下载资源
问答
  • 原生JS阻止冒泡

    2016-08-21 15:08:59
    1、阻止冒泡  function stopProp(e){  // 获得event 对象 并处理兼容  var ev = e || window.event;  if( ev.stopPropagation ){  ev.stopPropagation(); // 普通浏览器

     function stopProp(e){
        // 获得event 对象 并处理兼容
        var ev = e || window.event;
    
    
        if( ev.stopPropagation ){
            ev.stopPropagation(); // 普通浏览器阻止冒泡
        }else{
            ev.cancelBubble = true;  // IE 阻止冒泡
        }
    
        // 阻止系统默认的行为
        ev.preventDefault();
        // return false; 也能达到阻止默认行为的目的,但是可能会有兼容性问题
        return false;
    }

    事件处理
    ev.clientX  ev.clientY  获得鼠标在屏幕上的横纵坐标
    ele.addEventListener('click',doSomething,true)  // True为捕获,false为冒泡。

    ele.attachEvent("onclick", doSomething);  // IE浏览器的处理方法

    // ev.target 等于事件发生的对象

    // this 和 ev.currentTarget 相同,代表哪个对象在处理点击事件
    ev.eventPhase 代表事件处于哪个阶段
                // 1.捕获阶段
                // 2.点击元素的处理阶段
                // 3.冒泡阶段

    展开全文
  • 原生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:

    var $item = document.getElementById('item');
     $item.onclick = function (e) {//阻止冒泡
                if (e) {
                  e.stopPropagation();
                  e.preventDefault();
                } else {
                  window.event.returnValue = false;
                  window.event.cancelBubble = true;
                }
              }

    html:

    <div id="item">点击</div>


    展开全文
  • 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事件!

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

    展开全文
  • 进用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>
    
    展开全文
  • function stopPropagation(e) { e = e || window.event;... if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 ...
  • 我们只点击了最里面的那个div,但是在他的父级及以上div身上所绑定的事件都被...阻止浏览器的这种事件处理机制呢? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
  • js阻止冒泡的方式-完整版 直接讲结论: 1.原生js 两种方式绑定事件 onclick 和 addEventListener 阻止冒泡的唯一方式为 var e = window.event || arguments.callee.caller.arguments[0]; e.stopPropagation(); 2....
  • 原生js、jQuery、vue.js、react 阻止事件冒泡 一、什么是事件冒泡 一条鱼往上吐泡泡,这个泡泡就是事件,一直往上冒的过程中去把它经过的所有元素,只要这个元素身上有相同事件,就会去执行该元素的该事件,没有相同...
  • //弹出框消失 cancelShade(){ this.refs.shadeDiv.style.display="none" console.log(2) } keepShade(event){ console.log(1) event.preventDefault(); // 阻止默认事件
  • //IE阻止冒泡方法 } } //方法必须要放在window.onload下 window.onload = function(){ document.getElementById("hide").onclick = function(e){ stopPropagation(e); } document.getElementById('btn_show')....
  • 事件冒泡:html元素是嵌套...阻止冒泡事件: e.stopPropagation(); 默认事件: a标签的跳转事件就是默认事件 阻止默认事件: e.preventDefault();   <!DOCTYPE html> <html lang="en"> &l...
  • 事件冒泡:html元素是... 阻止冒泡事件: e.stopPropagation(); 默认事件: a标签的跳转事件就是默认事件 阻止默认事件: e.preventDefault(); <!DOCTYPE html> <html lang="en"> <head> &l...
  • 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } catch(e){ window.event.cancelBubble = true;//IE浏览器 ...原生js阻止默认事件 if ( e && e.preventDefault...
  • 阻止冒泡 W3C的方法是e.stopPropagation() IE是e.cancelBubble = true; 阻止默认行为 W3C的方法e.preventDefault...原生js的return false只会阻止默认行为,不会阻止冒泡。 jQuery的return false既阻止默认行为...
  • if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 } } //方法必须要放在window.onload下 window.onload = function(){ document....
  • 阻止冒泡

    2017-05-01 21:02:43
    // 原生js document.getElementById('btn').addEventListener('click', function (event) {  event = event || window.event;  if (event.stopPropagation){  // w3c方法 阻止冒泡  event.stop

空空如也

空空如也

1 2 3 4 5 6
收藏数 105
精华内容 42
关键字:

原生js阻止冒泡