8.Vue事件修饰符_vue stoppropagation

作者：笔触狂放9 | 2024-02-13 01:57:55

踩

vue stoppropagation

1. 方法

@click…stop 调用event.stopPropagation()：
event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
@click.prevent 调用event.preventDefault() 方法阻止元素发生默认的行为

1. 示例代码

<!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>事件修饰符</title>
	<script src="./js/vue.js"></script>
</head>
<body>
	 <div id="app">
	   <!--
	      事件修饰符:主要用于限制事件的触发条件 格式@事件.修饰符名称
	    -->
	  <input type="text" @keyup.a="print($event)"/>
	  <input type="text" @keyup.65="print($event)"/>
	  <input type="text" @keyup.delete="print($event)"/>
	  <input type="text" @keyup.backspace="print($event)"/>
	  <hr/>
	  <!--修饰符连写代表或者||-->
	  <input type="text" @keyup.a.b.c="print($event)"/>
	  <!--如果带有除数字与字母之外的特殊按钮的话则从or变为and-->
	  <input type="text" @keyup.a.ctrl="print($event)"/>
	  <hr/>
	  <input type="button" value="鼠标点击1" @mouseup.right="mouseprint($event)"/>
	  <input type="button" value="鼠标点击2" @mouseup.left.ctrl="mouseprint($event)"/>
	  <!--功能修饰符:主要用于限制标签原有功能-->
	  <input type="button" value="一次性事件修饰符" @click.once="printDiv(msg)"/>
	  <a href="http://www.itany.com" @click.prevent>itany</a>
	  <hr/>
	  <div style="width:400px;height:400px;border:1px solid black;" @click="printDiv('div1')">
	      div1
		<div style="width:300px;height:300px;border:1px solid black;" @click="printDiv('div2')">
		   div2
		   <div style="width:200px;height:200px;border:1px solid black;" @click="printDiv('div3')">
		   div3
		        <div style="width:100px;height:100px;border:1px solid black;" @click.stop="printDiv('div4')">
				div4
				</div>
		   </div>
		</div>
	  </div>
	</div>
</body>
 <script>
	 new Vue({
			  el:"#app",
			  data:{
				 msg:"旧参数"
			  },
			  methods:{
				print:function(e){
				  console.log(e.code+"========="+e.keyCode);
				},
				mouseprint:function(e){
				   console.log(e);
				},
				printDiv(name){
				   console.log(name);
				}
			  
			  }
		   });
 </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

2. 运行结果

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/79363