Vue input的blur事件影响下拉框中点击事件的解决方案用mousedown/mousedown替代click

最新推荐文章于 2024-01-18 11:43:30 发布

真爱一生@

最新推荐文章于 2024-01-18 11:43:30 发布

阅读量780

点赞数 1

分类专栏： javaScript 文章标签： vue.js javascript html

原文链接：https://blog.csdn.net/WangYanWenXin/article/details/123416923

版权

javaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章介绍了在Vue组件中遇到的点击事件click与失去焦点事件blur冲突的问题，以及解决方案。通过将click替换为mousedown来优先处理，或者在blur事件中添加setTimeout延迟处理，确保正确执行。还详细解释了mousedown、mouseup和click事件的触发顺序和条件。

摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述
代码：

<div class="searchModal_caiz">
  <Input search placeholder="请输入要搜索的内容" v-model="searchValue_caiz" @on-search="searchData_caiz" @on-blur ="hideSearchModal_caiz_groups"
        @on-focus="showSearchModal_caiz_groups"
    />
    <ul class="searchModal_caiz_groups" v-if="searchTextCaizStatus">
        <li v-for="item in searchTextCaiz" :key="item.id" @mousedown.left.prevent="searchLocation(item)">{{ item.code + ' ' + item.name  }}</li>
    </ul>
</div>

***当时 li 的事件使用的是click,它先执行的是blur，不会继续执行click,也尝试了给click.self不管用，找到博主的分享改成了 mousedown ***

解决如下：

1.在blur事件方法内部根据自身逻辑加个延迟(setTimeout)处理。
2. 将click换成优先级更高的mousedown，mousedown优先于blur执行（mousedown > mouseup > click）
PS：核心就是用mousedown和mouseup替代click，然后根据相关的需求，模拟出blur或focus的样子即可。

一、三个事件的触发时机

mousedown
当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会触发 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseup
当在元素上松开鼠标按键（左、右键均可）时，会触发 mouseup 事件。
与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

click
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会触发一次 click 事件。

二、注意
触发click事件的条件是按下并松开鼠标左键！按下并松开鼠标右键并不会触发click事件。
三个事件的触发顺序：
若在同一个元素上按下并松开鼠标左键，会依次触发mousedown、mouseup、click，前一个事件执行完毕才会执行下一个事件。
若在同一个元素上按下并松开鼠标右键，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件。
————————————————
版权声明：本文为CSDN博主「不知言」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/WangYanWenXin/article/details/123416923