快捷導(dǎo)航

Vue中keyup.enter和blur事件沖突的問題及解決

更新時間：2022年10月24日 09:19:49 作者：Nomal_1bit

這篇文章主要介紹了Vue中keyup.enter和blur事件沖突的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

keyup.enter和blur事件沖突問題

       <el-input class="input-new-tag" 
                v-if="row.inputVisible" 
                v-model="row.inputValue" 
                :ref="$index" size="small" 
                @keyup.enter.native="handleInputConfirm(row,$index)" 
                @blur="handleInputConfirm(row,$index)"
              >

在寫這個業(yè)務(wù)時，遇到了一個回車和blur沖突的問題，按了回車，導(dǎo)致了input也算失去了焦點(diǎn)，導(dǎo)致連續(xù)觸發(fā)2次handleInputConfirm(row,$index)這個函數(shù)。

解決方法

       <el-input class="input-new-tag" 
                v-if="row.inputVisible" 
                v-model="row.inputValue" 
                :ref="$index" size="small" 
                @keyup.enter.native="$event.target.blur" 
                @blur="handleInputConfirm(row,$index)"
              >
 
//將回車觸發(fā)的方法改為去觸發(fā)元素的blur事件 這樣就不會重復(fù)觸發(fā)了。

keyup.enter和blur同時觸發(fā)如何規(guī)避

問題描述

在某種場景下，需要點(diǎn)擊span標(biāo)簽變成input標(biāo)簽，然后在input標(biāo)簽下編輯，編輯完成之后按回車或點(diǎn)擊input標(biāo)簽外的地方又變回span標(biāo)簽

firstImage

雙擊后：

secondImage

回車：

thirdImage

實(shí)際上觸發(fā)了兩次

實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<template v-if="isShow">
				<span @dblclick="showInput">{{msg}}</span>
			</template>
			<template v-else>
				<input
					@keyup.enter="hideInput"
					@blur="hideInput"
					v-focus
					type="text"
					v-model="msg"
				/>
			</template>
		</div>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					msg: 'hello',
					isShow: true,
				},
				directives: {
					focus: {
						inserted: (el) => {
							el.focus()
						},
					},
				},
				methods: {
					showInput() {
						this.isShow = false
					},
					hideInput() {
            			console.log('觸發(fā)')
						this.isShow = true
					},
				},
			})
		</script>
	</body>
</html>

解決辦法

@keyup.enter="$event.target.blur()"

修改后：

forthImage

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<template v-if="isShow">
				<span @dblclick="showInput">{{msg}}</span>
			</template>
			<template v-else>
				<input
					@keyup.enter="$event.target.blur()"
					@blur="hideInput"
					v-focus
					type="text"
					v-model="msg"
				/>
			</template>
		</div>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					msg: 'hello',
					isShow: true,
				},
				directives: {
					focus: {
						inserted: (el) => {
							el.focus()
						},
					},
				},
				methods: {
					showInput() {
						this.isShow = false
					},
					hideInput() {
            			console.log('觸發(fā)')
						this.isShow = true
					},
				},
			})
		</script>
	</body>
</html>

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: