事件修饰符
2019-02-28 本文已影响0人
小丘啦啦啦
一、.stop
阻止事件的冒泡机制（里层元素事件被触发，会一层层冒泡到它外层触发外层的相同事件）。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
background: lightblue;
height: 150px;
}
</style>
</head>
<body>
<div id="app">
<div class="bg" @click="bgClick">
<!-- 按钮被点击，会先出发按钮点击事件，然后触发背景点击事件
冒泡机制，先当层，然后一层层往外冒 -->
<input type="button" value="会冒泡按钮" @click="btnClick"/>
<!-- 用(.stop)阻止当前元素事件的冒泡机制 -->
<input type="button" value="阻止了冒泡的按钮" @click.stop="btnClick"/>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods:{
bgClick(){
console.log("背景被点击！");
},
btnClick(){
console.log("按钮被点击！");
}
}
})
</script>
</body>
</html>
二、.prevent
阻止默认行为。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
background: lightblue;
height: 150px;
}
</style>
</head>
<body>
<div id="app">
<div class="bg" @click="bgClick">
<!-- 用(.prevent)阻止默认行为，防止a标签点击后默认跳转；顺便阻止点击冒泡到背景-->
<a href="http://www.baidu.com" @click.prevent.stop="aClick">百度链接</a>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods:{
bgClick(){
console.log("背景被点击！");
},
aClick(){
console.log("a标签被点击！");
}
}
})
</script>
</body>
</html>
三、.capture
添加事件监听器时（默认为冒泡）使用事件捕获机制，从“外”到“里”（外层元素事件被处罚，会往里捕获相同事件）。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
background: lightblue;
height: 150px;
}
</style>
</head>
<body>
<div id="app">
<!-- 用(.capture)实现捕获触发事件的机制
点击按钮处，会先触发bgClick，然后捕获触发里层按钮的事件btnClick -->
<div class="bg" @click.capture="bgClick">
<!-- 按钮被点击，会先出发按钮点击事件，然后除法背景点击事件
冒泡机制，先当层，然后一层层往外冒 -->
<input type="button" value="会冒泡按钮" @click="btnClick"/>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods:{
bgClick(){
console.log("背景被点击！");
},
btnClick(){
console.log("按钮被点击！");
}
}
})
</script>
</body>
</html>
四、.self
只有事件在该元素本身触发时（不是子元素通过冒泡触发等）才触发回调，不会阻止其他元素的冒泡机制。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
background: lightblue;
height: 150px;
}
</style>
</head>
<body>
<div id="app">
<!-- 用(.self)实现只有点击当前元素的时候，才会触发事件，而不会通过冒泡触发，
但不会阻止其他元素的冒泡机制，只有在冒泡到当前元素时会被阻止 -->
<div class="bg" @click.self="bgClick">
<!-- 按钮被点击，会先出发按钮点击事件，然后触发背景点击事件
冒泡机制，先当层，然后一层层往外冒 -->
<input type="button" value="会冒泡按钮" @click="btnClick"/>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods:{
bgClick(){
console.log("背景被点击！");
},
btnClick(){
console.log("按钮被点击！");
}
}
})
</script>
</body>
</html>
五、.once
事件只触发一次，其他事件修饰符也只作用一次。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
background: lightblue;
height: 150px;
}
</style>
</head>
<body>
<div id="app">
<div class="bg">
<!-- 用(.once)只触发一次事件函数，其他事件修饰符也只作用一次，不管顺序 -->
<a href="http://www.baidu.com" @click.prevent.once="aClick">百度链接</a>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods:{
aClick(){
console.log("a标签被点击！");
}
}
})
</script>
</body>
</html>
六、键盘事件的修饰符(.enter和.alt)
当键盘按enter键和按alt键时触发。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bg{
background: lightblue;
height: 150px;
}
</style>
</head>
<body>
<div id="app">
<div class="bg">
<!-- 当键盘按顺序按下alt后enter键时触发 -->
<input type="text" v-on:keyup.alt.enter="logName"/>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods:{
logName(){
console.log("正在输入");
}
}
})
</script>
</body>
</html>
七、其它自带的按键修饰符
.tab/.delete（捕获“删除”和“退格”）/.esc/.space/.up/.down/.left/.right
八、键盘码keyCode和自定义按键修饰符
键盘码对照表
可以直接在键盘事件后面(.键盘码)实现键盘所有按键的事件触发。
也可(Vue.config.keyCodes.自定义修饰符 = 键盘码)进行自定义修饰符。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.113="consoleLog"/>
<input type="text" @keyup.f2="consoleLog1"/>
</div>
<script>
//自定义全局修饰符
Vue.config.keyCodes.f2 = 113;
const vm = new Vue({
el:'#app',
methods:{
consoleLog(){
console.log('我被触发了');
},
consoleLog1(){
console.log('我也被触发了');
}
}
});
</script>
</body>
</html>
两个输入框都按f2。
九、element UI的input组件无法触发keyup键盘事件
<el-input
class="searchDiv"
v-if="ifSearch"
size="small"
:placeholder="searchPlaceholder?searchPlaceholder:'请输入搜索内容'"
v-model="searchMsg"
@keyup.enter="search"
>
<el-button
slot="append"
icon="el-icon-search"
@click="search"
></el-button>
</el-input>
input用作搜索框，想要输入回车时进行搜索，但是发现不生效。
因为已经被element UI封装为一个组件，原生输入框input的事件已经不适用。
加上修饰符.native，转成原生。
<el-input
class="searchDiv"
v-if="ifSearch"
size="small"
:placeholder="searchPlaceholder?searchPlaceholder:'请输入搜索内容'"
v-model="searchMsg"
@keyup.enter.native="search"
>
<el-button
slot="append"
icon="el-icon-search"
@click="search"
></el-button>
</el-input>
