事件修饰符

tofever

已于 2024-06-27 13:57:53 修改

阅读量229

点赞数 4

文章标签： javascript 前端 vue.js

于 2024-06-27 13:53:44 首次发布

本文链接：https://blog.csdn.net/tofever/article/details/140011530

版权

事件修饰符
prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
示例代码:

`<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>事件修饰符</title><!-- 引入Vue -->
<scripttype="text/javascript"src="../js/vue.js"></script>
<style>
* {margin-top:20px;}
* .demo1{height:50px;background-color: skyblue;}
* .box1{padding:5px;background-color: skyblue;}
* .box2{padding:5px;background-color: orange;}
* .list{width:200px;height:200px;background-color: peru;overflow: auto;}
* li{height:100px;}
* </style>
* </head>
* <body>
* <!-- Vue中的事件修饰符： 
* 1.prevent：阻止默认事件（常用）；
* 2.stop：阻止事件冒泡（常用）；
* 3.once：事件只触发一次（常用）； 
* 4.capture：使用事件的捕获模式；
* 5.self：只有event.target是当前操作的元素时才触发事件；       
*  -->
* <!-- 准备好一个容器-->
* <divid="root">
* <h2>欢迎来到{{name}}学习</h2>
* <!-- 阻止默认事件（常用） -->
* <ahref="http://www.atguigu.com"@click.prevent="showInfo">点我提示信息</a>
* <!-- 阻止事件冒泡（常用） -->
* <divclass="demo1"@click="showInfo">
* <button@click.stop="showInfo">点我提示信息</button>
* <!-- 修饰符可以连续写 先写的先起作用: 这样写就是先阻止默认行为后阻止冒泡-->
* <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
* </div>
* <!-- 事件只触发一次（常用） -->
* <button@click.once="showInfo">点我提示信息</button>
* <!-- 使用事件的捕获模式 -->
* <div class="box1"@click.capture="showMsg(1)">
* <div class="box2"@click="showMsg(2)">
* </div>
* </div>
* <!-- 只有event.target是当前操作的元素时才触发事件； -->
* <div class="demo1"@click.self="showInfo">
* <button @click="showInfo">点我提示信息</button>
* </div>
* </div>
* </body><script type="text/javascript">
* Vue.config.productionTip=false
* //阻止 vue 在启动时生成生产提示。
* newVue({el:'#root',data: {name:'尚硅谷'},
* methods: {showInfo(e) {alert('同学你好！')
* // console.log(e.target)},showMsg(msg) {console.log(msg)            
* }        
* }    
* })
* </script>
* </html>`