input失去焦点事件和点击事件冲突的解决思路

首先说一下应用场景

el-input框为禁用状态时，点击取消禁用，并显示后方两个按钮，

点击绿色按钮保存input框当前值，失去焦点或点击红色框时恢复改变前的值

思路就是不在input上的失去焦点方法，而是手动调用失去焦点方法

注意mouseleave 事件不支持冒泡。

mouseout 父元素内如果有子元素，鼠标离开子元素且未离开父元素，也会触发mouseout

<template><div><divstyle="display: flex; align-items: center"@mouseleave="handlemouseout"><el-inputref="elInputFocus":value="value"@input="elInputValue":disabled="disabled"autofocus></el-input><el-buttontype="success"icon="el-icon-check"circlesize="mini"v-if="!disabled"@click="handleConfirm"></el-button><el-buttontype="danger"icon="el-icon-close"circlesize="mini"v-if="!disabled"@click="handleClose"></el-button></div></div>
</template><script>
import { Input } from "element-ui";
export default {extends: Input,model: {prop: ["value"],},components: {},props: {value: {type: String,default: "",},disabled: {type: Boolean,default: false,},},watch: {disabled(val) {if (!val) {this.$nextTick(() => {this.$refs.elInputFocus.focus();});}else{this.flag=false}},value(newval, oldval) {this.oldValue = oldval;this.newValue = newval;},},computed: {},data() {return {oldValue: "",newValue: "",flag: false,};},methods: {handlemouseout(e){console.log(e);this.flag = truethis.handleBlur()},elInputValue(e) {this.$emit("input", e);},handleConfirm() {this.flag = true;this.$emit("input", this.newValue);this.$emit("confirm");},handleClose() {this.$refs.elInputFocus.blur();if (this.oldValue) {this.$emit("input", this.oldValue);}this.$emit("close");},handleBlur() {if (this.disabled && this.flag) {return;}this.$refs.elInputFocus.blur();if (this.oldValue) {this.$emit("input", this.oldValue);}this.$emit("blur");},},created() {},mounted() {},
};
</script>
<style lang="scss" scoped>
.el-input {margin-right: 10px;
}
.el-button {width: 26px;height: 26px;
}
</style>

input失去焦点事件和点击事件冲突的解决思路相关推荐

Android 中触摸事件与点击事件分析
触摸事件两种检测触摸事件的方式: 设置触摸监听 setOnTouchListener 返回 true: 表示消费事件 , 可以检测到 down/move/up 事件返回 false: 不消费事件 ...
ListView的长按事件和点击事件冲突的解决办法
需求是这样的:listView中点击item 跳转到一个activity,长按item可以对这条item进行删除操作,在删除前会弹出dialog(确认删除对话框). 但是在开发过程中发现,当长按某个i ...
Android 系统（218）---Android的事件分发机制以及滑动冲突的解决
Android的事件分发机制以及滑动冲突的解决声明: 本文主要涉及VIew的事件分发与滑动冲突的解决,关于View的事件分发流程的部分内容参考自: Android事件分发机制详解:史上最全面.最 ...
input中blur失去焦点事件与点击事件冲突的解决方法（vue）
一:前言最近在做百度的下拉框时遇到一个问题就是在点击下拉框时,input失去焦点,从而是的下拉框消失,使得点击事件没有用,因此查阅资料得到答案. 二:步骤遇到一个问题,就是输入框input的blu ...
input中blur失去焦点事件与点击事件冲突
场景: 当在输入框里输入手机号的时候,输入框高亮,并且关闭按钮显示,input失焦时关闭按钮隐藏现象: 遇到的问题是,当我们点击关闭按钮清空input框数据时,发现只是关闭按钮隐藏了,数据并没有清空 ...
JavaScript_input框中失去焦点事件和点击事件冲突的解决办法
前言: 在开发的过程中,我们经常会有搜索的需求,其中就涉及到的知识点就包括了今天我们要说的两个重要"角色",input框和展示列表的li. 需求: 当我们在input框中输 ...
adb inputswipe shell_[Android]通过adb shell input上报命令模拟屏幕点击事件【转】
常用的 input上报命令: input text 1234 实际向界面注入1234文字,有输入框,能明显看到效果 input keyevent 4 键盘事件,4 为返回 input tap 100 ...
[Android]通过adb shell input上报命令模拟屏幕点击事件
常用的 input上报命令: input text 1234 实际向界面注入1234文字,有输入框,能明显看到效果 input keyevent 4 键盘事件,4 为返回 input tap 100 ...
li的鼠标移入移出事件和点击事件分别实现为当前li添加样式，删除其他li样式...
li.jsp(需要提前导入jquery.min.js 地址:http://www.cnblogs.com/zhouerba/p/7358069.html ) 鼠标移入:当前li变色,其他li恢复原 ...
解决百度地图移动端（微信浏览器等）拖拽事件和点击事件冲突的BUG
在手机端,如果启用了百度地图的拖拽,那么部分手机上点击事件无法触发,无法获取点击位置的坐标,除非禁用拖拽的功能. 但如果禁用拖拽后,用户体验就很差,所以以下代码可以直接解决问题,亲测可用,如有疑问可以 ...

input失去焦点事件和点击事件冲突的解决思路

input失去焦点事件和点击事件冲突的解决思路相关推荐

最新文章

热门文章