精华内容
下载资源
问答
  • 本文实例为大家分享了js阻止冒泡和默认事件方法,供大家参考,具体内容如下 阻止冒泡。冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止...
  • 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了。下面的domo就是很好的例子。 ...

    阻止冒泡。冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了。下面的domo就是很好的例子。

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box {
    				width: 300px;
    				height: 300px;
    				background: red;
    				display: none;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function() {
    					var btn = document.getElementById('btn');
    					var box = document.getElementById('box');
    					btn.onclick = function(ev) {
    						var oEvent = ev || event;
    						box.style.display = 'block';
    						//oEvent.cancelBubble = true;//高版本浏览器
    						stopBubble(oEvent);
    						//在低版本的chrome和firefox浏览器中需要兼容性处理
    						//高版本chrome和firefox浏览器直接使用上面这行代码即可
    					}
    					document.onclick = function() {
    						box.style.display = 'none';
    					}
    
    				}
    				//阻止冒泡事件的兼容性处理
    			function stopBubble(e) {
    				if(e && e.stopPropagation) { //非IE
    					e.stopPropagation();
    				} else { //IE
    					window.event.cancelBubble = true;
    				}
    			}
    		</script>
    	</head>
    
    	<body>
    		<input type="button" id="btn" value="语言" />
    		<div id="box"></div>
    	</body>
    
    </html>


    我所实现的效果是:点击按钮btn让box显示,而点击其他地方则让box消失。

    如果我不阻止冒泡的话,那么首先btn会触发点击时间,让盒子显示,但是由于box是包含在document中的,所以会向上冒泡又触发document的点击事件,盒子又消失。这个事件的执行顺序可以在不同的点击事件中使用alert来验证。关于cancelBubble的兼容性处理在高版本的chrome和firefox中已经不需要兼容处理了,直接使用oEvent.cancelBubble = true 即可。下面的阻止浏览器事件的兼容性处理在高版本浏览器中同样不需要。


    默认事件。即浏览器本身具备的功能。

    function preventDefa(e){
    	if(window.event){
    		//IE中阻止函数器默认动作的方式 
    		window.event.returnValue = false; 
    	}
    	else{
    		//阻止默认浏览器动作(W3C) 
    		e.preventDefault();
    	} 
    }
    这种是兼容性写法,但是如果你只需要支持高版本浏览器的话,那么如上文一样,一句话即可。

    btn.onclick = function (){
    	return false;
    }



    展开全文
  • 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;
    });
    
    展开全文
  • 本篇文章主要介绍了javascript阻止事件冒泡和浏览器的默认行为。具有一定的参考价值,下面跟着小编一起来看下吧
  • 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, 2.event.preventDefault()方法 这是阻止默认事件的方法,调用此...

    1.event.stopPropagation()方法

    这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个链接,这个链接仍然会被打开,

    2.event.preventDefault()方法

    这是阻止默认事件的方法,调用此方法是,链接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

    3.return false  ;

    这个方法比较暴力,他会同时阻止事件冒泡也会阻止默认事件;写上此代码,链接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

    展开全文
  •  — 阻止元素的默认事件。 注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 代码如下: 百度 代码如下: var samp = document.getElementByTagName(“a”); ...
  • JS阻止冒泡和取消默认事件(默认行为) js冒泡捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。 防止冒泡捕获 w3...
  • 这篇文章主要讲解js阻止事件冒泡阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别。1、event.stopP...
  • JQuery 提供了两种方式来阻止事件冒泡,Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作,下文有个不错的示例,需要的朋友可以参考下
  • 一、阻止事件冒泡:  1、html中加return false  2、js中加return false  3、IE下:window.event.cancelBubble = true;  FF下:event.stopPropagation(); //阻止事件冒泡函数 function stopBubble(evt) { ...
  • 代码如下:function stopBubble(e){ if(e&&e.stopPropagation){//非IE e.stopPropagation();...如果要阻止默认事件的触发,即默认的href事件,那么就需要调用如下函数: 代码如下:function stopD
  • 阻止冒泡事件与默认事件 什么是冒泡事件?例如,在应该按钮是绑定一个"click"事件,那么"click"事件会依次在它的父级元素中被触发 防止冒泡捕获 w3c的方法是e.stopPropagation() IE的方法是e.cancelBubble = ...
  • JS阻止事件冒泡和默认行为

    千次阅读 2019-06-02 17:27:15
    1、首先对事件冒泡和默认行为以及要用到...默认事件(行为)指的是有些元素自身会有一些行为会自行被触发。例如< a>链接,提交按钮< input type = ‘submit’/> event代表事件的状态。例如触发event对象...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止冒泡和默认事件</title> </head> <...阻止冒泡和默认事件&l...
  • 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } catch(e){ window.event.cancelBubble = true;//IE浏览器 ...原生js阻止默认事件 if ( e && e.preventDefault...
  • 一、事件冒泡 二、默认行为 在说事件冒泡之前,我们先说说事件对象(Event) Event 1、在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素、事件的类型...
  • 1. 阻止冒泡事件 主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上,在事件传播的任何阶段都能使用。使用方法如下(兼容IE): function stopBubble(event){ if(window.event){//兼容IE window.event....
  • 下面小编就为大家带来一篇浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)。
  • JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault...
  • 本篇文章主要介绍了详解vue事件对象、冒泡阻止默认行为,这里整理了详细的代码,有需要的小伙伴可以参考下。
  • if(e.preventDefault){ e.preventDefault() }else{ window.event.returnValue = false //兼容IE6、7、8 } alert("阻止默认事件") } </script> </html> 阻止事件冒泡: e.stopPropagation() //w3c写法 window.event...
  • 谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName(input)[0]; var $...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,082
精华内容 10,832
关键字:

js阻止冒泡和默认事件