blur事件与click事件冲突怎么解决

最新推荐文章于 2023-09-11 22:10:15 发布
原创 最新推荐文章于 2023-09-11 22:10:15 发布 · 848 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
js原生

当前文章被收录于：

js原生
31 篇文章 1 人学习
订阅专栏 查看详情
angular

当前文章被收录于：

angular
7 篇文章 0 人学习
订阅专栏 查看详情
移动端

当前文章被收录于：

移动端
6 篇文章 0 人学习
订阅专栏 查看详情
本文探讨了在前端开发过程中，click事件与blur事件发生冲突的问题，并提供了一种解决方案：将click事件替换为mousedown事件。文章还提出了对于这两种事件交互行为差异的好奇，留待后续深入研究。
今天遇到一个问题  一个文本框输入内容的时候会显示一个列表 失去焦点时列表消失 列表中的数据点击时 内容显示到文本框中  但是点击列表数据的click事件与input的blur事件冲突 没有执行  后来把列表的click事件改成mousedown就可以了  但是mousedown为什么跟blur不冲突  而click就冲突呢？先留个疑问吧  以后遇到问题可以换种方法就可以解决 至于原理  以后深究
30天入门 SAP BTP 开发系列之八：动手在 SAP BTP 上开发第一个 ABAP 透明表
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
09-29 1686
ABAP Cloud 环境下创建透明表的方法与数据迁移实践 本文介绍了在 SAP BTP ABAP 环境中创建透明表并迁移数据的完整流程。与传统的 SE11 事务码不同，ABAP Cloud 需通过 ABAP Development Tool 创建数据库表，使用代码定义表结构。作者详细演示了如何： 在开发包中创建名为 ZCSDN_TRAVEL 的透明表 使用 ABAP 代码定义表字段和约束 通过 ABAP 类实现数据从标准表/DMO/TRAVEL 到新建表的迁移 验证数据迁移结果 文中还提供了相关技术概念的
深入理解JVM虚拟机第一篇：Java跨平台和字节码以及多语言混合编程
热门推荐
七叔的博客
09-11 1万+
本位描述了Java的跨平台和JVM的跨平台的作用，Java语言的字节码的概念多语言混合编程应用到JVM虚拟机以及Java发展的重大事件。
input获取焦点时候value值隐藏，失去焦点的时候显示
QTFYING的博客
11-09 7165
我们经常在开发过程中会遇到这样的问题，就是当我们给input添加一个value值时候，会覆盖掉placeholder，但是当我们去修改的时候呢，她本身呢又不会自动的消失，这时候input的另外两个属性就可以派上用场了，获取焦点事件和失去焦点事件： input type="text" onfocus="javascript:this.value=''" onblur="javas
基于ROS2的cartogarpher 3D建图和定位 （官方包+自己的包）,离线与在线（基于livox-mid-360）
基于ROS2的cartogarpher 3D建图和定位 （官方包+自己的包）,离线与在线（基于livox-mid-360）
element ui select选择器，使input失去焦点，并隐藏下拉框
qq_41643226的博客
04-08 1万+
逻辑是当表单中一个input输入之后才显示下拉框，反之提醒需要输入 百度很多，有人说是element ui 的版本，升级就行了，但是代码没有贴出来（代码真的很简单，但是还是有直观的代码好一些，我是渣渣T。T） 实现效果如下 代码： 重点是要给select附上 ref="xxxx" 在click函数中： this.$refs.xxxx.blur() ...
简单记录一下今天碰到一个小问题的解决思路
csdn_fan321的博客
04-14 246
前言 今天接到一个需求，类似 Google 搜索根据关键字自动联想功能，如下图所示 首先说一下我的实现思路 监听搜索框的值改变事件，获取关键字，请求数据接口，显示结果列表面板 监听搜索结果列表点击事件，获取当前值，同时隐藏结果列表面板 监听搜索框失去焦点事件，隐藏结果列表面板（这一步主要是考虑到用户可能会没有点击结果列表，直接搜索） 问题描述 在实现第 3 步的时候遇到了一个问题，当我的点击...
今天跟大家分享一下关于input框获取焦点和失去焦点的问题。
我爱丶毛爷爷的博客
08-02 1万+
首先页面中有个id为input1的input框，如何让页面加载完事让其获取焦点呢？ 以前我们都是用jQuery中的focus()方法。自从HTML5出现以来，出现了很多不一样的属性和标签等等，我们得跟上时代的潮流，HTML5中有一个属性，‘autofocus’，我们只需要在input中加上这个属性（就像这样），就能使其自动获取焦点。 还有一个问题就是我们如何手动让input失去或者获取焦点呢？
layui eleTree改造，支持格式化节点
闪耀星星的窝
09-04 1799
eleTree原地址：https://fly.layui.com/extend/eleTree/ css不变，eleTree.js修改如下： /** * @Name: 基于layui的tree重写 * @Author: 李祥 * @License：MIT * 最近修改时间: 2019/10/24 */ layui.define(["jquery","laytpl"], function (exports) { var $ = layui.jquery; var laytpl
blur事件与click事件冲突的解决办法
菜菜的博客
01-23 5053
在处理表单登录的过程中，遇到了一个问题，当我们在输入框输入内容输入框获取到焦点时，输入框后面会出现一个图标删除已输入的内容，因此删除图标会绑定一个click事件，但是当我们点击图标的时候，也触发了input的blur事件，blur事件会让input失去焦点时隐藏删除的图标，并且blur事件先于图标的click事件执行，因此这时候点击图标并不会删除输入框已输...
如何解决js中下拉框blur事件与click事件冲突
Fancy_vae的博客
11-01 1459
一、blur事件和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件 <input type="text" id="tel"> <script> document.addEventListener("blur", function(){ console.log("my doc
如何解决blur事件和click事件冲突问题?
爱吃鱼油
09-06 1735
鼠标在输入框中时，查询内容。当点击【下一页】时，失去焦点，显示内容的窗口会关闭。假如可以点击下一页，当鼠标再次点击表格其他区域时，应触发blur事件关闭窗口，所以点击【下一页】时应重新获得焦点。代码如下： 如何解决blur事件和click事件冲突问题? //下一页 $scope.nextPage= function (){ console.log("进入下一页方法...."); v
提示输入框功能blur事件与click事件冲突解决
ahq2018的博客
03-08 587
问题描述： demo大概模样: 搜索框中输入关键字, 下方弹出提示, 点击提示词条, 去往相应的词条页面(这里用alert代替); 而搜索框失去焦点时, 会隐藏下方的提示内容 代码如下: <body> <div class="container"> <input type="text" id="input" placeholder="输入关键字" /> <ul class="test" id="test"> <li&gt
解决blur与click冲突
Zhu_daye的博客
06-24 1417
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。 一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。 click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。 示例1：blur事件为表单事件 <input type="text" id="tel"> <script> documen..
输入框blur事件与click事件冲突问题
weixin_44646763的博客
07-06 1122
这个现象我在写项目的时候出现有几次了，但一般都没反应过来，以为是代码写错了而没触发方法。 例如下面，这是之前做的一个vue项目出现的问题： 打印的时候发现blur方法执行了，但列表的点击事件没有执行。 原因：其实这是事件间的执行优先级问题，blur的优先级比click高，所以blur事件先执行了且把列表隐藏了，列表就没有触发click事件咯 解决方法： 1、改用其他事件优先级可以比blur高的事件 2、使用setTimeout延时器 hiddenList(){ setTimeout(() =
js blur失焦事件与click点击事件冲突
m0_37378152的博客
03-02 3601
场景：输入框绑定blur失焦事件，focus后点击按钮，触发了输入框的blur事件，但是按钮点击事件没有触发。 原因：blur失焦事件的优先级比click点击事件高。 解决方法： 1.都触发 blur事件里添加延时 blurEvent () { setTimeout(() => { // }, 200) } 2.不想触发blur，只触发click （1）定义一个flag，click事件设置flag为true （2）blur事件里添加延时，判断flag为
click与blur的冲突
qq_36971710的博客
04-29 901
背景：输入框失去焦点要执行指定动作，输入框外面有提交按钮。 问题：当需要去点击输入框外面的按钮时，先执行了blur事件再执行click事件，但同时，blur事件比click事件结束得慢。那么问题来了，怎么严格限定click事件比blur事件先执行呢？ 解决方案核心： e.preventDefault()—该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作） 事件执行顺序...
事件blur与click冲突
胖胖的博客
10-19 632
练习jQuery，写评论回复的网页时遇到的， 问题如下： 点击评论后，出现回复按钮， 点击按钮后，提交评论。若点其他地方，触发blur事件，回复按钮消失。但是此时无论怎么点回复按钮都不会触发click事件。 原因 javascript为单线程，同一时间只能执行处理一个事件，而blur事件比click优先，所以先触发了blur事件，但此时按钮已经消失，无法触发它click事件。 解决办法 方法一...
js、jquery 中 blur事件和click事件冲突
zy18729286306的专栏
12-09 9702
问题说明： 在表单验证中，我们往往会在输入框失去焦点时触发一个blur事件，但当失去焦点后点击了一个按钮，这时blur事件和click事件就都触发了，由于js是单线程的所以就出现了问题，现在需要让blur先执行验证，然后在触发click事件。 解决方法： 给按钮的click事件设置延迟执行setTimeOut(fn,100)，延迟时间的设置要大于blur事件的执行时间，这样就会在blur
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值