Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >为什么在模糊事件处理程序中添加一个setTimeout来修复另一个单击处理程序的“掩蔽”?

为什么在模糊事件处理程序中添加一个setTimeout来修复另一个单击处理程序的“掩蔽”?
EN

Stack Overflow用户
提问于 2016-04-15 11:29:04
回答 3查看 2.6K关注 0票数 7

寻找对这里这里提供的答案的解释。

简单地说,我有两个要素。一个带有onBlur事件的输入,一个带有一个onClick事件的div。在没有任何特殊处理的情况下,当我通过单击div模糊输入时,会触发onBlur事件,而onClick事件则不会触发。

但是,如果我在模糊事件处理程序中放置一个setTimeout,则当我单击div时会调用这两个事件处理程序。为什么要这么做?

HTML:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="text" name="input" id="input1" />
<div id="div1">Focus the input above and then click me. (Will see 1 alert)</div>
<br/>
<input type="text" name="input" id="input2" />
<div id="div2">Focus the input above and then click me. (Will see 2 alerts)</div>

Javascript:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).ready(function() {
  function clickHandler() {
    alert('Click!');
  }

  function blurHandler() {
    alert('Blur!');
  }

  $('#input1').on('blur', function() {
    blurHandler();
  })
  $('#input2').on('blur', function() {
    window.setTimeout(blurHandler, 200);
  })

  $('#div1').on('click', function() {
    clickHandler();
  })
  $('#div2').on('click', function() {
    clickHandler();
  })
});

小提琴演示是这里

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-04-15 11:45:16

发生这种情况是因为模糊事件发生在单击之前。alert()方法停止脚本的执行,一旦停止,单击事件将在取消警报框后不触发。在模糊处理程序中使用setTimeout()方法,实际上允许触发单击事件。

我建议你听鼠标向下而不是点击。当你按下鼠标按钮时,鼠标向下的和模糊的事件就会一个接一个地发生,但只有当你释放它时才会点击。

票数 3
EN

Stack Overflow用户

发布于 2016-04-15 11:34:46

这是因为alert()的模态特性。尝试使用console.log(),您将看到两者都会被调用。

票数 0
EN

Stack Overflow用户

发布于 2016-04-15 11:36:26

在您定义.之后,setTimeout将触发事件。所以你会有更多的时间点击文本。

另一方面,第一个输入没有时间触发模糊,因此更难触发单击事件,但是如果单击足够快,即使是第一个输入,也会看到两个警报。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36655407

复制
相关文章
事件处理程序
IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。
RiemannHypothesis
2022/10/31
6580
JavaScript事件处理程序
事件就是用户或者浏览器执行的某种操作。我们常用的点击,滚动视口,鼠标滑动都是事件,为响应事件而调用的函数被称为事件处理程序,在js中事件处理程序的名字以 on 开头。
大熊G
2022/11/14
5300
浅谈JavaScript的事件(事件处理程序)
  事件就是用户或者浏览器自身执行的某种动作。诸如click、load和mouseover,都是事件的名字。而响应某个事件的函数就叫事件处理程序。事件处理程序的名字以“on”开头,比如click事件的事件处理程序是onclick。为事件指定事件处理程序的方式有多种方式。 HTML事件处理程序 元素支持的事件,都可以使用与相应事件处理程序同名的HTML特性来指定。这个特性的值能支持一定的JavaScript代码。例如,在单击按钮的时候执行一些JavaScript代码。 <div id="aa" onclic
水击三千
2018/02/27
1.5K0
详解JavaScript事件处理程序
事件是用户与浏览器进行交互的方式。譬如用户点击按钮就会产生click事件,浏览器会找到相应js代码并执行,我们要做的就是按照规则编写js代码放在指定位置即可。
Learn-anything.cn
2021/12/26
8600
vc++ 在程序中运行另一个程序的方法
在vc++ 程序中运行另一个程序的方法有三个: WinExec(),ShellExcute()和CreateProcess() 三个SDK函数: WinExec,ShellExecute ,CreateProcess可以实现调用其他程序的要求,其中以WinExec最为简单,ShellExecute比WinExec灵活一些,CreateProcess最为复杂。     WinExec 两个参数,前一个指定路径,后一个指定显示方式。     ShellExecute 可以指定工作目录,并且还可以寻找文件的关联直
用户1198337
2018/01/19
4K0
JavaScript事件对象与事件处理程序
事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息。既然event是事件对象,那么它必然存在属性
小蔚
2019/09/11
8120
正确调用事件处理程序
不管是刚接触 C# 还是已经具有多年开发经验的大部分人会觉得事件处理很简单,只需要把事件定义好然后在需要的时候出发它就可以了。其实这种想法是错误的,这里面有很多需要注意的问题。下面这段代码是大部分开发人员经常使用的定义事件处理程序的方法。
喵叔
2020/09/08
8630
[译]Laravel 5.0 之事件及处理程序
本文译自 Matt Stauffer 的系列文章. ---- 提示:如果你还没有看过 Laravel 5.0 之命令及处理程序 这篇文章,建议先看一下。它包括了本文所需的背景知识。 借助 Laravel 5 的命令(及命令处理程序),你可以通过封装的方式非常简单、直接地向系统发出命令。DoThis.HandleACommandThatIsTellingMeToDoThis, 它是命令式的,告诉系统要做什么事。 但有时候,不管是在命令结果中,还是在其它的上下文中,我们需要发出更抽象的通知。比如在 Larav
小李刀刀
2018/03/02
1.2K0
sql模糊匹配中%、_的处理
防sql注入之模糊匹配中%、_处理:        StringBuilder sbSql = new StringBuilder(); sbSql.Append(@"SELECT * from tablename t where 1 = 1 "); string name = dictparameters["Name"].ToString(); //Name参数值 if(name.Contains("%"
guokun
2020/09/03
1.5K0
在.NET Core程序中设置全局异常处理
但是在.NET Core中并没有AppDomain的相关实现,至少在.NET Core最新的发布版本里没有。
yoyofx
2018/09/05
1.8K0
CA2109:检查可见的事件处理程序
除非绝对必要,否则不要公开事件处理方法。 只要处理程序和事件签名匹配,就可以将调用公开方法的事件处理程序(委托类型)添加到任何事件中。 事件可能由任何代码引发,并且经常由高度可信的系统代码引发,以响应用户操作(例如单击某个按钮)。 向事件处理方法添加安全检查不会阻止代码注册调用方法的事件处理程序。
用户4268038
2022/02/20
5340
iOS开发中图片的模糊处理
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/79958415
用户1451823
2018/09/13
2K0
iOS开发中图片的模糊处理
Java 使用Runtime在一个Java程序中启动和关闭另一个Java程序
重点是Java启动的process,不能直接执行java、jps等命令,也获取不到环境变量,会报command not found
heasy3
2020/08/02
2.4K0
在React 中如何处理事件?
在 React 中处理事件有几种常见的方式,具体取决于你使用的是类组件还是函数组件。
王小婷
2023/10/08
1930
图像处理中处理批量图片和文件的小程序
---- 1 批量图片重新命名 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <opencv2/opencv.hpp> #include <iostream> #include <fstream> using namespace std; using namespace cv; int main() {
用户9831583
2022/06/16
3900
图像处理中处理批量图片和文件的小程序
为什么在 Eclipse 中,运行本程序却是另外一个程序的结果?
你使用 Eclipse 敲代码的时候,有没有遇到过这样一种情况,明明我点击运行本程序结果却是另外一个程序的结果?这是为什么呢?话不多说,我们从实际案例来分析错误原因。
白鹿第一帅
2021/03/02
2.6K0
为什么在 Eclipse 中,运行本程序却是另外一个程序的结果?
微信小程序中如何打开另一个小程序
今天分享个京东朋友帮忙抢红包的连接,在微信打开后,进入“京会玩”的小程序,再次“进入”竟然发现进入另一个小程序,接下来看京东是如何实现的呢? 一.实现流程 点击一个小程序跳转到对应的小程序,然后点击
honey缘木鱼
2018/06/12
7.1K0
在Java程序中处理数据库超时与死锁
简介   每个使用关系型数据库的程序都可能遇到数据死锁或不可用的情况,而这些情况需要在代码中编程来解决;本文主要介绍与数据库事务死锁等情况相关的重试逻辑概念,此外,还会探讨如何避免死锁等问题,文章以DB2(版本9)与Java为例进行讲解。   什么是数据库锁定与死锁   锁定(Locking)发生在当一个事务获得对某一资源的“锁”时,这时,其他的事务就不能更改这个资源了,这种机制的存在是为了保证数据一致性;在设计与数据库交互的程序时,必须处理锁与资源不可用的情况。锁定是个比较复杂的概念,仔细说起来可能又需要
Java帮帮
2018/03/15
2K0
IOS5开发-UIScrollView添加单击事件的方法
UIScrollView在开发中是一个非常常用的控件,UIScrollView具有水平、垂直滚动和缩放效果。但是尽然没有响应单击事件这个事件。而这个事件在日常的交互中是非常需要的。比如当用于单击或轻触图片的某个位置时,给于一些交互性提示。 下面我将用例子说明一下如何给UIScrollView添加一个单击的响应。 代码如下: 添加一个自定义的UIScrollView,命名:UITouchScrollView UITouchScrollView.h代码如下 #import <Foundation/Foundat
阿新
2018/04/12
1.9K0
点击加载更多

相似问题

递归添加单击事件处理程序

33

如何使用“添加处理程序,删除处理程序”处理单击按钮事件

11

在另一个事件处理程序中调用事件处理程序?

30

在另一个事件处理程序中设置jquery事件处理程序

11

单击事件处理程序

35
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文