8.Vue事件修饰符

最新推荐文章于 2023-11-28 17:29:30 发布

西瓜咬人啦

最新推荐文章于 2023-11-28 17:29:30 发布

阅读量122

点赞数

分类专栏： Vue 文章标签： js vue javascript

@TMQ

本文链接：https://blog.csdn.net/weixin_42076050/article/details/109183702

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>

2. 运行结果

在这里插入图片描述

西瓜咬人啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.Vue事件修饰符

1. 方法@click…stop 调用event.stopPropagation()：event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。@click.prevent 调用event.preventDefault() 方法阻止元素发生默认的行为1. 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录