vue项目中blur和click事件冲突

最新推荐文章于 2022-09-05 15:31:36 发布
最新推荐文章于 2022-09-05 15:31:36 发布
阅读量3.7k 收藏 2
点赞数 2
分类专栏： vue 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39085895/article/details/113655393
版权

blur和click事件

blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。
click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。
因为JS是单线程，同一时间只能处理一个事件，且blur执行顺序优先click。

介于此我用了简单粗暴的方法，将click事件换成了mousedown事件
在这里插入图片描述
在这里插入图片描述
其实还有其他方法，这篇博文里讲述的比较详细些【解决blur与click冲突】

不同dom的blur事件和click事件发生冲突
GahoYeung的博客
04-20 377
直接上测试代码 <!DOCTYPE html> <html lang="en"> <head> <title>不同dom的blur事件和click事件发生冲突</title> <meta charset="UTF-8"> <meta name="viewport" content="width...
移动端输入框的失焦事件和按钮事件冲突
叮当的猫猫的博客
09-07 1453
2.使用@click 指令替代v-on:click，在按钮上使用@click，并在点击事件处理函数中使用setTimeout延迟执行失焦操作，这样可以确保按钮点击事件能够先执行，再执行失焦操作。原因出在，在移动端，当输入框获取焦点后，点击按钮不会触发输入框的失焦事件，这是因为移动设备上的软键盘和按钮点击事件会有冲突，为了解决这个问题，可以尝试以下几种做法。3.移动设备上的按钮点击使用v-on:rouchend事件代替v-on:click,因为touched事件在移动设备上触发时，输入框已经失去了焦点。
Javascript blur与click冲突解决办法
10-20
主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况，这里举了几个例子，和解决办法，需要的朋友可以参考下
vue-使用el-form表单时blur事件和button的点击事件冲突的解决方案
郝峰vip的博客
11-11 2574
前言 最近在项目中遇到一个场景，就是在校验输入框失焦(blur)事件后，第一次点击时按钮的点击事件失效，后来排查，发现原因，是因为第一次点击时先走了blur事件，然后再走点击事件，所以导致第一次点击按钮失效。 出现bug的原因 由于浏览器的默认事件，当你点击按钮时，页面中有文本框失焦时，会先触发文本框的blur事件，然后再触发click事件,所以导致了上述的bug。解决方案如下。 解决方案 pc端：使用mousedown事件来代替click事件 移动端：使用touchstart事件来代替click事件
vue中失焦事件和点击事件冲突，如何解决？
一只琪琪子的博客
09-18 2448
①可以通过添加setTimeout来实现（但是有时候会出问题，会失效） //设备号失焦事件 blurInput(){ setTimeout(() => { this.isShowAuto = false },100) }, ②可以把点击事件修改成@mousedown鼠标按下事件（推荐这样解决） <div v-show="isShowAuto" class="auto"> <ul> .
输入框blur事件与click事件冲突问题
weixin_44646763的博客
07-06 1034
这个现象我在写项目的时候出现有几次了，但一般都没反应过来，以为是代码写错了而没触发方法。 例如下面，这是之前做的一个vue项目出现的问题： 打印的时候发现blur方法执行了，但列表的点击事件没有执行。 原因：其实这是事件间的执行优先级问题，blur的优先级比click高，所以blur事件先执行了且把列表隐藏了，列表就没有触发click事件咯 解决方法： 1、改用其他事件优先级可以比blur高的事件 2、使用setTimeout延时器 hiddenList(){ setTimeout(() =
click事件与输入框blur事件冲突。
weixin_46330425的博客
03-11 304
点击输入框外的元素时，blur事件的优先级高于click事件，导致在选择框选择时无法选择到值。 解决办法：把click事件用mousedown事件替换，这样mousedown事件会先于blur事件执行，就可以选择。
vue中失焦事件和点击事件冲突，如何解决？，要先执行失去焦点事件
最新发布
09-21
在Vue中，如果失焦事件（blur）和点击事件（click）之间存在冲突，通常是因为它们都绑定了相同的回调函数，而click事件会在失去焦点之前触发。为了解决这种问题，确保先执行失焦事件，你可以采用以下策略： 1. **...
onclick和onblur冲突问题的快速解决方法
01-19
我们同时使用onblur和onclick来使下拉框隐藏，但是更大的问题出现了，这两个功能相冲突，onblur过于强悍，根本没有onclick方法实现的机会，搜索框无法获取点击项的内容。这个就是我们想要解决的onclick和onblur冲突...
解决blur与click冲突
Zhu_daye的博客
06-24 1237
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。 一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件 <input type="text" id="tel"> <script> documen..
vue blur事件优于click事件触发
weixin_45969830的博客
12-10 1954
vue blur事件优于click事件触发 现有一个防文件夹功能,编辑时有编辑与删除功能。 当文件夹input框编辑失焦时触发编辑文件名并保存 编辑时点击input后方关闭图标触发删除功能 但点击关闭功能时也会触发input失焦事件，且 @blur优先级高于@click会导致点击关闭图标会触发@blur的失焦事件而不会触发@click的关闭事件。 解决方法 @click事件换成@mousedown鼠标点击事件 ...
如何解决blur事件与click事件冲突
weixin_30401605的博客
05-24 416
如果在标签上绑定blur事件，很有可能在click其他标签时，造成click事件没有被触发，原因是因为blur事件先于click事件触发而造成click事件失效。解决方案是blur事件加一个延迟效果； 1 $("input").on('blur',function(){ 2 setTimeout(function () { 3 //do something 4 ...
blur事件与click事件冲突怎么解决
e87e09e11的博客
07-20 796
今天遇到一个问题  一个文本框输入内容的时候会显示一个列表 失去焦点时列表消失 列表中的数据点击时 内容显示到文本框中  但是点击列表数据的click事件与input的blur事件冲突 没有执行  后来把列表的click事件改成mousedown就可以了  但是mousedown为什么跟blur不冲突  而click就冲突呢？先留个疑问吧  以后遇到问题可以换种方法就可以解决 至于原理  以后深究
Vue input的blur事件影响下拉框中点击事件的解决方案 用mousedown/mousedown替代click
WangYan的博客
03-11 3309
最近遇到一个需求，输入框输入关键词，要出一个带输入建议的弹框，类似于ElementUI自带的，只是需求中的弹框底部有个分页功能，因此用不了自带的，只好自己写了。 然后就遇到blur和click冲突的问题了… <div class="poi-element"> <el-input class="poi-input" ref="poiRef" v-model="poiKeyword" @input="poiInputDebouce" @blur="poiBlur.
解决blur和onclick冲突问题
笨小孩
11-14 6685
场景：如下图所示，当点击X按钮时，会同时触发blur和onclick事件，此时不需要执行blur事件中代码，只执行onclick事件中代码。 代码示例： &lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt; &lt;script type...
失去焦点和点击事件的执行顺序 onblur/onclick
Florenza的博客
09-05 1317
再点击联想词的时候 跳转 但是 联想词的外框设置了失去焦点时候消失所以 点击联想词不生效。在点击联想词的时候使用 onmousedown。vue项目中blur和click事件冲突。
blur和click事件的先后顺序问题
weixin_30911809的博客
11-13 615
这两个同时用会有冲突。懒得翻译了，需要的自己看哈。 以下摘自stackoverflow。 I have an input field, where I try to make autocomplete suggestion. Code looks like <input type="text" id="myinput"> <div id="myresults">&l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值