input的focus事件阻止冒泡

在写界面的时候，选中一个输入框，就会弹出一个弹窗。还需要做可清除。
在加了clearable属性之后，就遇到问题了。点击 X 图标进行清楚之后，弹窗也会打开。
注意：我这里使用的是vxe-input，一个vxe-table组件的输入框

这里的问题就是点击清除图标，@focus也进行了冒泡，执行了打开弹窗的事件。

先上代码

这里原来就是使用的@focus事件来打开弹窗，在遇到冒泡的问题之后，就想着在函数里执行
$event.stopPropagation() 来取消冒泡。但发现没有效果

最后选择使用@click.stop来打开弹窗，这时候会报错

这里最终解决是要加上.native的修饰符，监听原生的click事件，并在清除回调里使用$event.stopPropagation() 来取消冒泡

input的focus事件阻止冒泡相关推荐

重新认识vue之事件阻止冒泡
冒泡的表现近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
React合成事件(阻止冒泡stopImmediatePropagation)
文章目录一.遇到的问题问题描述分析二.React 合成事件 1.执行顺序 2.合成事件阻止冒泡 2.1e.stopPropagation 2.2 e.nativeEvent.stopImmed ...
如何阻止input的focus事件
首先要明确Input标签各种事件的执行顺序,对于点击事件,是按照mousedown -> mouseup -> click这个顺序走的,那么focus事件在哪一步处理的? 直接上代码: & ...
angular 点击事件阻止冒泡及默认行为
经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...
html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...
vue--点击事件阻止冒泡的方法
vue-click点击事件的冒泡行为 **1. click.stop就是外层包内层,内层写了.stop不会触发到外层的,只触发内层 .prevent就是阻止默认跳转链接,比如写了一个百度链接,没有 p ...
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一.冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
壹 ❀ 引在前面两篇文章中,我们花了较大的篇幅介绍react的setState方法,在介绍setState同步异步时提到,在react合成事件中react对于this.state更新都是异步,但在原 ...
label 阻止冒泡防止点击label 触发2次事件
// 必须要把 jnput的外面的label加上事件阻止冒泡,否则点击label的时候,会冒泡到input上再次触发input的点击事件$('.xt_order_cleft_modb_rl_dx') ...

input的focus事件阻止冒泡

input的focus事件阻止冒泡相关推荐

最新文章

热门文章