js事件冒泡和默认事件处理(原生js、vue)

时间: 2018-12-11阅读: 1232标签: 事件

一、默认事件

何为默认事件?比如 a 会跳转页面,submit 会提交表单等。


1. 普通js方法

e.preventDefault()函数

<a href="http://www.baidu.com" onclick="stopDef(event)">百度</a>
function stopDef(e){
  e.preventDefault();
}



2. vue.js方法

 .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

<div id="app">
  <a href="http://www.baidu.com" @click.prevent="vueStopDef()">百度</a></div>
window.onload = function(){  new Vue({
    el:"#app",
    methods:{
      vueStopDef(){        console.log("vue.js通过 .prevent 阻止默认事件")
      }
    }
  });
}



二、冒泡事件

何为事件冒泡?执行下段代码

<!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>
			.div1 {
				width: 500px;
				height: 500px;
				border: 1px solid black;
			}
			.div2 {
				width: 400px;
				height: 400px;
				border: 1px solid black;
			}
			.div3 {
				width: 300px;
				height: 300px;
				border: 1px solid black;
			}
			.div4 {
				width: 200px;
				height: 200px;
				border: 1px solid black;
			}
			.div5 {
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}
		</style>
		<script src="../js/vue.js"></script>
		<script>
			function fun01() {
				console.log("点击了div1");
			};

			function fun02() {
				console.log("点击了div2");
			};

			function fun03() {
				console.log("点击了div3");
			};

			function fun04() {
				console.log("点击了div4");
			};

			function fun05() {
				console.log("点击了div5");
			};
		</script>
	</head>
	<body>
		<div class="div1" onclick="fun01()">
			<div class="div2" onclick="fun02()">
				<div class="div3" onclick="fun03()">
					<div class="div4" onclick="fun04()">
						<div class="div5" onclick="fun05()">
							div05 </div>
						div04 </div>
					div03 </div>
				div02 </div>
			div01 </div>
	</body>
</html>

当点击div05时,同时按顺序触发 div05、div04、div03、div02、div01;当点击div03的时候 ,同时按顺序出发div03、div02、div01 等。从内层div一层一层触发外层div事件,这种现象就是事件冒泡。    


1. 普通 js 方法

e.stopPropagation()。上述代码中,在定义fun05()改成fun05(e),同时在方法中加入e.stopPropagation()。在调用是 onclick=“fun05(event)”。当点击div05时,不会冒泡触发外层事件。


2. vue.js方法

 .stop 是vue 的内置修饰符 调用了 e.stopPropagation()。阻止冒泡事件发生。下段代码中div5和div3出发点击事件时使用 .stop ,阻止冒泡事件发生。当点击div05 活着div03时,不会触发冒泡事件。

<div id="app" class="div1" @click="fun01">
  <div class="div2" @click="fun02">
    <div class="div3" @click.stop="fun03">
      <div class="div4" @click="fun04">
        <div class="div5" @click.stop="fun05">
          div05        </div>
        div04      </div>
      div03    </div>
    div02  </div>
  div01</div>
window.onload = function (){  new Vue({
    el:"#app",
    methods:{
      fun01(){        console.log("点击了div1");
      },
      fun02(){        console.log("点击了div2");
      },
      fun03(){        console.log("点击了div3");
      },
      fun04(){        console.log("点击了div4");
      },
      fun05(){        console.log("点击了div5");
      }
    }
  });
}


但是,还是有点问题,上段代码运行后,因为对div5 和div3阻止了冒泡事件。但是,当点击div4 的时候,div4发生冒泡事件,同时出发了div3的点击事件(后面的被div阻止了)。也就是说,即使自己本身使用.stop阻止冒泡事件(不去触发外层事件),但是自身还是会被其它(内层事件)触发。这个时候,就需要 .self。

 .self 是vue 的内置修饰符 对于所指定的元素 只有当前元素本身可以触发事件,修饰符可以连写。即,将上段代码div3绑定事件改为

<div @click.stop.self="fun03">

此时,能出发 div3 的点击事件只有在点击div3时这一种情况。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1556

关闭

JavaScript模拟事件的注意要点

DOM中的事件模拟三个步骤: 首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:UIEvents(DOM3中的UIEvent)鼠标和键盘事件

HTML5触摸事件演化tap事件

触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件

js如何取消事件传递?

如果在javascript中只希望事件发生在它的目标而不是在它的父元素上,即取消它的冒泡事件的发生,该如何做?因为按照javascript发生事件的顺序,它由两个阶段:分别从根元素--父元素--目标元素(捕获阶段),再到父元素--根元素

vue.js事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

vue公共事件总线eventBus的简单理解和使用

公共事件总线eventBus的实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。

js事件概念和事件监听

JavaScript使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。HTML元素大都包含了自己的默认行为,例如:超链接、提交按钮等。

关于鼠标移动太快导致moseleave事件不触发的问题

我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。

JS使用Enter事件将输入的字符倒叙输出

在JavaScript中执行当用户按下Enter键位时将用户输入的字符倒叙输出!split() 方法用于把一个字符串分割成字符串数组。

原生js实现trigger方法

事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?

angular怎么移除事件监听

在一个controller代码块被释放掉的时候,我们通常要将一些监听的事件同时释放掉,正常的$scope是不需要我们来维护的。当我们对$rootScope进行监听的时候,类似的全局变量或者说在其他地方依然有引用的变量是不会被释放掉的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!