前端框架vue.js系列（4）：事件修饰符与按键修饰符

怼烎@ 2021-09-14 06:20 296阅读 0赞

vue修饰符是指在触发事件或按键时额外的触发条件或回调。比如点击事件只允许触发一次，可以使用@click.once。

# **原生事件对象** #

vue可以通过以下方式，获取原生的事件对象：

<button @click="getEventDom($event);">getEventDom</button>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		methods: {
    			getEventDom: function(event) {
    				event.preventDefault();
    				console.log(event);
    			}
    		}
    	});
    </script>

#    **事件修饰符** #

事件修饰符是指与事件触发相关的修饰符。按上例中原生事件对象，要阻止冒泡事件需要用到.preventDefault()，然而使用事件修饰符，仅需@click.stop即可。

事件修饰符有以下几种，以click事件为例：

@click.stop 阻止继续冒泡  
@click.capture 由默认冒泡模式转为捕获模式  
@click.prevent 提交事件不再重载页面  
@click.self 只当事件在该元素本身触发时触发回调  
@click.once 仅执行一次

修饰符间可以串联使用，如用 @click.prevent.self 会阻止所有，而 @click.self.prevent 只会阻止该元素上的。

# **按键修饰符** #

按键修饰符是指与键盘事件相关的修饰符。如对Enter键的监听@keyup.enter，快捷组合件的监听等。按键修饰符一般与input标签配合使用，有以下几种：

.enter  
.tab  
.delete (捕获 “删除” 和 “退格” 键)  
.esc  
.space  
.up  
.down  
.left  
.right

# **新增修饰符** #

vue2.x版本后新增了下面几种修饰符：

.ctrl  
.alt  
.shift  
.meta

修饰符综合demo：

<body>
    	<div id="app">
    		<button @click="getEventDom($event);">getEventDom</button>
    		<br />
    		<div @click.capture="outDivClick();" style="width: 200px; height: 200px; background-color: #FF0000;">
    			<div @click="innerDivClick();" style="width: 100px; height: 100px; background-color: azure;"></div>
    		</div>
    		<br />
    		<input @keyup.enter="enter();" />
    		<br />
    		
    		<div @click.ctrl="ctrlClick();">Ctrl + Click</div>
    		
    		<input @keyup.alt.67="clear();">
    	</div>
    </body>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		methods: {
    			getEventDom: function(event) {
    				event.preventDefault();
    				console.log(event);
    			},
    			outDivClick: function() {
    				alert("outDiv");
    			},
    			innerDivClick: function() {
    				alert("innerDiv");
    			},
    			enter: function() {
    				alert("enter");
    			},
    			ctrlClick: function() {
    				alert("ctrl+Click");
    			},
    			clear: function() {
    				alert("clear");
    			},
    		}
    	});
    </script>

# **自定义配置按键** #

Vue.config.keyCodes.f1 = 112; // 全局定以后，就可以使用 @keyup.f1