精华内容
下载资源
问答
  • 原生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.冒泡阶段

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

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

    展开全文
  • <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width: 300px; ... height: 2.
    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#box1 {
    			width: 300px;
    			height: 300px;
    			background-color: pink;
    		}
    		#box2 {
    			width: 200px;
    			height: 200px;
    			background-color: orange;
    		}
    		#box3 {
    			width: 100px;
    			height: 100px;
    			background-color: red;
    		}
    	</style>
    </head>
    <body>
    	<div id="box1">
    		<div id="box2">
    			<div id="box3"></div>
    		</div>
    	</div>
    
    	<script>
    		// 点击box
    		var box1 = document.getElementById('box1');
    		var box2 = document.getElementById('box2');
    		var box3 = document.getElementById('box3');
    		var arr = [box1, box2, box3];
    		for (var  i = 0; i < arr.length; i++) {
    			var box = arr[i];
    			box.onclick = function (e) {
    				console.log(this.id);
    				e = e || window.event;
    
    				// 1. DOM标准方法
    				// Propagation 传播
    				// e.stopPropagation();
    
    				// 2. 取消冒泡 IE老版本 非标准方法 chrome中适用
    				e.cancelBubble = true;
    			}
    		}
    	</script>
    </body>
    </html>

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

    展开全文
  • 原生js阻止冒泡,兼容写法

    千次阅读 2018-05-28 15:49:30
    js:var $item = document.getElementById('item'); $item.onclick = function (e) {//阻止冒泡 if (e) { e.stopPropagation(); e.preventDefault(); } else { ...
  • 进用vue写阻止事件冒泡的时候,想了一下用JS怎么写,然后想不起来了,记一下。 HTML中: <div onclick="clickOneTime(arguments(0))"></div> <script> function clickOneTime(e) { var evt = e ...
  • 1.原生js 两种方式绑定事件 onclick 和 addEventListener 阻止冒泡的唯一方式为 var e = window.event || arguments.callee.caller.arguments[0]; e.stopPropagation(); 2.jq方式 两种方式绑定事件 $().click(fn)....
  • 阻止冒泡:v-on:事件类型.stop 当点击p或者span时候都会提示点击了p,当span添加了v-on:click.stop="span()后,点击span区域不会触及到父级。 <div id="app"> <p v-on:click="p()"> <span v-on:...
  • 一种解决事件冒泡的方法,有较好的浏览器兼容性,具体思路参见文档: http://blog.csdn.net/ivyandrich/article/details/22041933
  • JS阻止冒泡事件的三种方法

    万次阅读 2019-07-17 15:11:47
    冒泡事件:比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。 <div class="box">...script type="text/javascript"> $('.btn').click(functio...
  • JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault...
  • ,,事件委托(cliboard插件机制)是基础基于事件冒泡的 只能用原生js,但是input框当用户看不见时是不能复制的(浏览器安全规范),v-show,display不行,position定位其实可以,但是占地方(也可以再把宽度调小) ...
  • 事件冒泡,可能有些同学还不是很清楚,什么是事件冒泡?来看个简单例子。 &lt;div onclick="alert('最外层')"&gt; &lt;div onclick="alert('中间层')"&gt; &lt;a id=&...
  • function stopPropagation(e) { e = e || window.event;... if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 ...
  • //弹出框消失 cancelShade(){ this.refs.shadeDiv.style.display="none" console.log(2) } keepShade(event){ console.log(1) event.preventDefault(); // 阻止默认事件
  • 方法一: 事件回调函数内 e.stopPropagation() 方法二: 事件回调函数内进行判断 if (e.target==e.currentTarget) { 要做的事情 } <div class="box1"> <div class="box2">......
  • js 阻止冒泡事件

    2021-01-11 16:30:59
    window.event? window.event.cancelBubble = true : e.stopPropagation();
  • 如何阻止事件冒泡,这里先拓展个知识点: DOM事件流存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。 DOM标准事件流的触发的先后顺序为:先捕获再冒泡。即当触发dom事件时,会先进行事件捕获,捕获到事件...
  • #hide{width:75%;height:80px;background:skyblue;display:block;}.hander{cursor:pointer;}input{margin:5 0 0 900;}//不用window.onload也可以document.documentElement.onclick = function(){document....
  • 不同的浏览器之间存在兼容问题,在IE与标准浏览器之间存在很大的差异,所以在实现阻止浏览器默认行为和阻止事件冒泡就要考虑要它们之间的不同 /** * 取消冒泡 * @param {事件} e */ function cancelBubble(e){...
  • 1.事件冒泡、捕获 事件冒泡: 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上) 事件捕获: 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即...
  • js阻止事件冒泡的两种方法

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,052
精华内容 3,620
关键字:

原生js阻止冒泡