解决blur与click事件的冲突问题

李维亮

发布于 2021-07-08 02:21:35

1.6K0

文章被收录于专栏：李维亮的博客李维亮的博客

最近搞了个组件发现在实现input 离焦下拉收起，和点击下拉里面的选项进行选择的时候，会同时触发blur和click事件，如图：

经过分析发现主要原因是由于blur事件会比click事件更先触发导致的。

发现问题了就好解决了把click使用mousedown事件来代替就解决了

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-03-26，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

jquery

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

android jquery 编程算法 linux

click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作，这两个方法用法及其类似，所以这只介绍click事件，只有单击释放后才生效，而且同一元素不能同时绑定click和dbclick事件

用户1289394

2021/10/13

5K0

<a href=" 全栈程序员栈长 • 2天前 • 未分类 • 阅读 0

jquery java https 网络安全

　　前阵子在一个移动项目中，通过 <a href = “#” > 的方式绑定click 事件来提交一个表单，由于表单信息比较敏感，于是采用的post 同步提交的方式，原本到也没有什么。后来万恶的PM说 “你这个按钮呀，要固定在底部比较好” ，于是乎就通过 position:fixed 固定到底部了。那么，问题来了，在ios 下，虚拟键盘是浮在页面上层的，导致的结果是当键盘收起后，浮在最底部的按钮不在最底下，而跑到中间来了，(极端条件下还可能挡住输入框导致无法输入)，并且随着屏幕的滚动而滚动，，(表现类似于absolute) ，，高大上的苹果也是真心坑了一回。

全栈程序员站长

2022/09/20

4030

MUI 在上拉加载的容器中手机无法触发click事件

html5 html

问题：我有一个list，在mui 上拉加载和下拉刷新的容器里。在电脑浏览器里可以触发点击事件，手机无法触发。

星宇大前端

2019/01/15

2K0

解决移动端click事件的300ms延时

click script src touch viewport

岳泽以

2022/10/26

7810

[jQuery学习系列四 ]4-Jquery学习四-事件操作

jquery

前言: 今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷青年中国说 SELF格致论道参考：http://www.365mini.com/page/tag/jquery-event-methods 1,ready ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。该函数的作用相当于window.onload事件。 2,blind bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。举例：

一枝花算不算浪漫

2018/05/18

4.5K0

移动端web开发，click touch tap区别

html5 github

移动端用tap时会有穿透问题一：click与tap比较 click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击二：tap的穿透处理使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。三：穿透原因问题：在HTML5点击了q以后，弹出b的弹框因为tap事件是通过document绑定了tou

用户1174387

2018/01/17

2.3K0

解决blur与click冲突

jquery

在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。

奋飛

2019/08/15

3K0

不完美解决click和dblclick事件冲突问题

jquery linux 腾讯云测试服务

　　当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click。在实际测试中发现，当dblclick的时候，总会出现1次click。下文将要解决的就是这个问题。

胡尐睿丶

2022/03/23

1.4K0

移动端click事件300ms延迟

css

一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现今，移动端300ms的点击延迟逐渐变得明显而无法忍受。

Dawnzhang

2018/12/28

2.8K0

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

jquery 微信

这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。

yaphetsfang

2020/07/30

3.4K0

移动端touch拖动事件和click事件冲突问题解决

click element touch 事件

一个 TouchList 对象，是包含了如下触点的 Touch 对象：触摸起始于当前事件的目标 element 上，并且仍然没有离开触摸平面的触点。

甜点cc

2022/10/05

2.3K0

点击穿透原理及解决

https 网络安全单片机

一、事件触发顺序 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。　　手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。　　手机

吴裕超

2018/03/29

4.3K0

vue封装带提示框的单选/多选文本框组件

vue.js 小程序 jquery 编程算法

在web开发中，经常会遇到公共模块复用的问题，例如页头、页脚、导航条等，传统的后端视图引擎如smarty、服务器配置SSI、或是纯前端的嵌套iframe、js请求模板资源动态渲染等方式的表现都只差强人意。而现代前端框架，尤其是vue的组件化彻底改变了前端开发模式，大大提升多人合作开发效率。

CS逍遥剑仙

2018/12/15

5.4K0

python测试开发django-167. jQuery中append() 动态新增的元素 click 事件无效的解决办法

jquery

主要原因是事件是在 dom 加载的时候就已经完成了，新增的 div 元素 click 事件就无效了。最简单的方法就是直接在标签中写onclick=””, 这种是简单粗暴的解决办法，但一般不这样写。

上海-悠悠

2021/11/16

9210

JQuery中bind和unbind函数

其他

测试：页面代码： <body> <input type="button" name="aaa" value="点击我"> <input type="checkbox" name="checkbox1"> </body> JQuery代码： $().ready(function(){ for (var i = 0; i < 3; i++) { $("input[type='button']").click(function(){ alert("aaaa"); }); } } alert("aaaa")会执行三次，在事件嵌套事件中，不希望看到这样的情况，需要把上层事件禁用，此时可引入bind和unbind函数解决。引入函数: for (var i = 0; i < 3; i++) { $("input[type='button']").unbind("click"); $("input[type='button']").bind("click", function(){ alert("aaa"); }); } alert("aaa");仅执行一次。 bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数 unbind() 方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。 event 是事件类型，类型包括：blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。 data 为可选参数，作文event.data属性值传递给事件对象的额外数据对象。 function 是用来绑定的处理函数。语法： $(selector).bind(event,data,function) // event 和 function 必须指出下面些段代码做说明：例1：删除p的所有事件 $("p").unbind(); 例2：删除p的click事件 $("p").unbind("click"); 例2：删除p元素click事件后出发的test函数和添加p元素click事件后触发的test函数 $("p").unbind("click",test);$("p").bind("click",test); 注意：要定义 .bind() 必须指明什么事件和函数现在来看个简单的demo ，整个div有一个点击收起展开的事件，如果想要点击链接但是不触发div的点击事件，需要在触发链接的时候把div的点击事件禁用，这里我用到链接mouseenter事件是unbind删除div的事件。这里还不算完，这时候只要鼠标进入链接区域，div的点击事件就删除了，我们还需要加入鼠标移出链接区域的时候恢复div点击事件。代码如下： 12345678910$(function(){ var Func = function(){ $(".com2").toggle(200); } $(".test").click(Func) $(".test a").mouseenter(function(){ $(".test").unbind(); //删除.test的所有事件 }); $(".test a").mouseleave(function(){ $(".test").bind("click",Func); //添加click事件 }); });event 是事件类型 … function 是用来绑定的处理函数。部分内容来自http://www.dearoom.com/blog/详解unbind和bind/http://www.dearoom.com/blog/事件捕获事件冒泡和阻止事件冒泡/

一个会写诗的程序员

2018/08/17

1.1K0

如何解决移动端Click事件300ms延迟的问题？

iphone javascript ios jquery

早在 2007 年初，苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。

Javanx

2019/09/04

1.5K0

JS篇(028)-移动端 click 事件、touch 事件、tap 事件的区别

jquery

1.click 事件在移动端会有 200-300ms 的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的 200-300ms 之后，才触发 click，如果 200-300ms 之内还有 click，就会进行放大缩小。

齐丶先丶森

2022/12/05

6.7K0

Vue一个案例引发的动态组件与全局事件绑定总结

vue.js 缓存

最近在自学 Vue 也了解了一些基本用法，也记录了一些笔记有兴趣的朋友可以去查看我的其他文章，技术这东西真的不能光靠看，看是没有的，你必须要动手实践，只有在实战项目中才能发现问题，才能发现我们没有掌握的知识点，然后发现问题解决问题，我们的能力才能得以提升，要不然就有点眼高手低了。

六小登登

2019/02/25

1K0

vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」

java ios https 网络安全 jquery

该事件与v-on:input事件的区别在于：input事件是实时监控的，每次输入都会调用，而@keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

全栈程序员站长

2022/08/12

13.5K0

vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」

Asp.Net回车键触发Button的OnClick事件解决方案

其他

在aspx页面有textbox文本框，还有三个button按钮。启用textbox的TextChanged事件和button的click事件。问题：现在在textbox文本框输入完数据按“回车”后，会触发TextChanged事件，但同时还会触发该页面第一个button按钮的Click事件。解决方法一：当在文本框中敲回车的时候,表单提交。因为在.net中一个Page只有一个form表单。所以也就有一个Sumbit事件。当UseSubmitBehavior的属性是True的时候,表单的提交就会触发此

磊哥

2018/04/26

2.3K0

解决blur与click事件的冲突问题

解决blur与click事件的冲突问题

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐