本文主要是介绍015-事件修饰符，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
- prevent：阻止默认事件（常用）；
- stop：阻止事件冒泡（常用）；
- once：事件只触发一次；
- capture：使用事件的捕获模式；
- self：只有 event.target 是当前操作的元素时才触发事件；
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>事件修饰符</title><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是当前操作的元素时才触发事件；--><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 阻止默认事件（常用） --><a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div class="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)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件； --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div></div>
</body>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el: '#root',data: {name: 'name'},methods: {showInfo(e) {alert('showInfo')// console.log(e.target)},showMsg(msg) {console.log(msg)}}})
</script>
</html>
这篇关于015-事件修饰符的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
