标签：input NPU cli height capture v-on oct 标签 document
事件修饰符:
.stop阻止冒泡
冒泡机制是指，先触发当前元素的事件，再触发包裹当前元素的元素的事件。
比如，div内有一个按钮，它们都绑定了单击事件，当单击按钮时会先触发按钮的click后触发div的click。
使用.stop可阻止冒泡如<button @click.stop="btnHandler">无冒泡
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: pink;
}
</style>
</head>
<div id="app">
<div class="inner" @click="divHandler">
<button @click="btnHandler">有冒泡</button>
<button @click.stop="btnHandler">无冒泡</button>
</div>
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
divHandler() {
alert(‘div‘);
},
btnHandler() {
alert(‘btn‘);
}
}
}
);
</script>
</html>
.prevent阻止默认事件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<a href="https://www.baidu.com/" @click="href">去百度</a>
<br />
<a href="https://www.baidu.com/" @click.prevent="href">去不了百度</a>
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
href() {
alert(‘去百度‘);
}
}
}
);
</script>
</html>
.capture 添加事件侦听器时使用事件捕获模式
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: pink;
}
</style>
</head>
<div id="app">
<div class="inner" @click.capture="divHandler">
<button @click="btnHandler">捕获机制</button>
</div>
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
divHandler() {
alert(‘div‘);
},
btnHandler() {
alert(‘btn‘);
}
}
}
);
</script>
</html>
.self只当事件在该元素本身(比如不是子元素)触发时触发回调
在外层标签的事件中使用该修饰符修饰则事件不能通过冒泡机制触发
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: pink;
}
</style>
</head>
<div id="app">
<div class="inner" @click="divHandler">
<button @click="btnHandler">有冒泡</button>
<button @click.stop="btnHandler">无冒泡</button>
</div>
<br />
<div class="inner" @click.self="divHandler">
<button @click="btnHandler">冒泡机制失效</button>
</div>
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
divHandler() {
alert(‘div‘);
},
btnHandler() {
alert(‘btn‘);
}
}
}
);
</script>
</html>
.once事件只触发1次
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner {
height: 150px;
background-color: pink;
}
</style>
</head>
<div id="app">
<!--这样串联起来只会阻止第一次点击的默认事件-->
<a href="https://www.baidu.com/" @click.prevent.once="href">去百度</a>
<input type="button" @click.once="href" value="不串联" />
</div>
<body></body>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
href() {
alert(‘再点一次去百度‘);
}
}
}
);
</script>
</html>
标签：input NPU cli height capture v-on oct 标签 document
原文地址：https://www.cnblogs.com/junlinsky/p/12897768.html
