首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当“模糊”事件发生时,我如何才能发现哪个元素焦点被转移到*?

当“模糊”事件发生时,我如何才能发现哪个元素焦点被转移到*?

提问于 2018-03-22 23:18:24
回答 2关注 0查看 226

假设我将一个blur函数附加到HTML输入框中,如下所示:

代码语言:javascript
运行
AI代码解释
复制
<input id="myInput" onblur="function() { ... }"></input>

有没有办法获得导致blur事件触发的元素的ID (被点击的元素)在函数内部?怎么样?

例如,假设我有这样的跨度:

代码语言:javascript
运行
AI代码解释
复制
<span id="mySpan">Hello World</span>

如果我在输入元素具有焦点后单击该跨度,则输入元素将失去焦点。函数如何知道它mySpan被点击了?

PS:如果跨度的onclick事件发生在输入元素的onblur事件之前,我的问题就会被解决,因为我可以设置一些状态值来指示一个特定的元素被点击了。

PPS:这个问题的背景是我想从外部触发一个AJAX autocompleter控件(来自可点击的元素)来显示它的建议,而不会立即因为blur输入元素上的事件而消失。所以我想检查blur一个特定的元素是否被点击过,如果是的话,忽略模糊事件。

回答 2

酒当歌

回答已采纳

发布于 2018-03-23 07:48:49

嗯......在Firefox中,可以使用explicitOriginalTarget拉取被点击的元素。我期望toElement为IE做同样的事情,但它似乎并不奏效......但是,可以从文档中提取新聚焦的元素:

代码语言:javascript
运行
AI代码解释
复制
function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

警告:这种技术并没有引起的焦点变化工作的互联通过与键盘领域,并没有在Chrome或Safari在所有工作。使用的一个大问题activeElement(IE除外)是未持续更新,直到之后blur事件已被处理,并在处理过程中可能没有有效的价值可言! { // Use timeout to delay examination of activeElement until after blur/focus // events have been processed. setTimeout(function() { var target = document.activeElement; document.getElementById("focused").value = target ? target.id||target.tagName||target : ''; }, 1); }

这应该适用于大多数现代浏览器(在Chrome,IE和Firefox中测试),但需要注意的是,Chrome并未将焦点集中在单击按钮(与选项卡对应)上。

珠政彬u

发布于 2018-03-23 08:37:57

根据UI Events,你可以使用relatedTarget事件的属性:

用于识别EventTarget与焦点事件相关的辅助,具体取决于事件的类型。

对于blur事件,

relatedTarget:接收焦点的事件目标

例:

代码语言:javascript
运行
AI代码解释
复制
function blurListener(event) {
  event.target.className = 'blurred';
  if(event.relatedTarget)
    event.relatedTarget.className = 'focused';
}
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

代码语言:javascript
运行
AI代码解释
复制
.blurred { background: orange }
.focused { background: lime }

代码语言:javascript
运行
AI代码解释
复制
<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

注意relatedTarget直到版本48(bug 962251MDN)才能支持Firefox 。

和开发者交流更多问题细节吧,去 写回答
相关文章
失去焦点和获得焦点发生事件(js)
{ alert(‘请确认您输入格式是否正确!‘); }
全栈程序员站长
2022/09/07
9.9K0
JavaScript 技术篇 - js 查看哪个元素获取了焦点,js 指定元素获取焦点方法
查看焦点元素 通过 document.activeElement 可以获取哪个元素获取到了焦点。 如图所示,我的光标在这个查询框里。
小蓝枣
2020/09/24
17.7K0
JavaScript 技术篇 - js 查看哪个元素获取了焦点,js 指定元素获取焦点方法
当 Redis 发生高延迟时,到底发生了什么
Redis 是一种内存数据库,将数据保存在内存中,读写效率要比传统的将数据保存在磁盘上的数据库要快很多。但是 Redis 也会发生延迟时,这是就需要我们对其产生原因有深刻的了解,以便于快速排查问题,解决 Redis的延迟问题
Bug开发工程师
2019/11/15
1.7K0
网页打开时都发生了什么?我被吓着了
  在浏览器里输入网址或者点击链接,网页打开了……这是我们上网时再普通不过的一幕,但是如此简单的表象背后,却隐藏着无比复杂的技术流程。想涨涨知识吗?往下看吧。   一个HTTP请求的过程   为了简化我们先从一个HTTP请求开始,简要介绍一下一个HTTP求情的网络传输过程,也就是所谓的“从输入URL到页面下载完的过程中都发生了什么事情”。   ● DNS Lookup 先获得URL对应的IP地址   ● Socket Connect 浏览器和服务器建立TCP连接   ● Send Request 发送HTT
用户1289394
2018/02/28
1.8K0
网页打开时都发生了什么?我被吓着了
当 snapshot 失败时发生了什么
工作中遇到了与 snapshot 异常相关的问题,特此总结一下,与 snapshot 相关的流程图如下:
shengjk1
2020/10/16
1.1K0
当 snapshot 失败时发生了什么
当 Redis 发生高延迟时,到底发生了什么
Redis 是一种内存数据库,将数据保存在内存中,读写效率要比传统的将数据保存在磁盘上的数据库要快很多。但是 Redis 也会发生延迟时,这是就需要我们对其产生原因有深刻的了解,以便于快速排查问题,解决 Redis的延迟问题
程序员历小冰
2019/11/12
1.4K0
当 Redis 发生高延迟时,到底发生了什么
当 Redis 发生高延迟时,到底发生了什么
Redis 是一种内存数据库,将数据保存在内存中,读写效率要比传统的将数据保存在磁盘上的数据库要快很多。但是 Redis 也会发生延迟时,这是就需要我们对其产生原因有深刻的了解,以便于快速排查问题,解决 Redis的延迟问题
程序员历小冰
2019/12/05
6820
焦点事件
焦点详解:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候就可以接收用户的输入 1.点击 2.tab 3.js
河湾欢儿
2018/09/06
3.5K0
当一个模块被导入两次时,会发生什么?
然后在另一个模块 consumer 中,将上述模块 increment 导入两次:
疯狂的技术宅
2020/03/27
9050
当测试发现300个缺陷时
当测试人员发现了这么多问题后,是否还隐藏着更多的未知问题?当测试人员疲于提交大量的缺陷时,测试执行的有效性是否降低了?还有哪些风险项存在?
CKL的思考
2023/08/28
2410
当测试发现300个缺陷时
获得焦点与失去焦点事件
获得焦点事件(onfocus)是当某个元素获得焦点时触发事件处理程序。
全栈程序员站长
2022/09/07
6.6K0
当flex容器中包含absolute元素时
我们设置了justify-content: center;,不同机型显示区别如下:
celineWong7
2020/11/05
3.9K0
jquery中失去焦点事件_easyui失去焦点事件没触发
事件会在获得焦点的时候触发,既可以是鼠标行为,也可以是按tab键导航触发的行为,并且绑定一个处理方法。
全栈程序员站长
2022/09/20
5.4K0
我发现我的数据被操纵了……
大数据文摘作品 作者:danah boyd 编译:糖竹子、白丁、Aileen 索引的完整性不再是决定搜索结果质量的唯一因素。用户感兴趣的搜索结果常常淹没在“垃圾结果”中。 ---- 引自Sergey Brin 和Larry Page的《解剖谷歌搜索原理》(1998年4月版) 当前,我们正目睹着一场数据被滥用的大剧。限制数据滥用并且努力解决偏见数据和问题数据,正成为解决科技对社会基石产生影响的重要条件。 简而言之,我认为大家应该重新考虑,安全、公平到底意味着什么。本文从三个方向告诉我们,在数据驱动的世界中,
大数据文摘
2018/05/24
6290
子元素margin-top转移到父元素
如果子元素设置了margin-top/bottom,且父元素没有触发hasLayout,那么子元素的margin就可能转移到父元素。具体表现如下图(父元素虽然设置了background,但并不能覆盖子元素的margin部分;不过父元素高度足够时可以覆盖margin-bottom):
gojam
2019/09/19
1.3K0
子元素margin-top转移到父元素
WPF Window 窗口获得焦点和失去焦点事件
Window 窗口获得焦点和失去焦点事件(窗口变为背景窗口、窗口切换等都引起窗口焦点失去) Activated获得焦点事件 和 Deactivated失去焦点的事件: Activated: 获得焦点 (首次打开软件时;由别的软件切换回当前软件时;点击当前软件在任务栏的按钮时) Deactivated:失去焦点,与Activated正好相反,(Deactivated = de + activated) 使用方法有两种: 第一种是在XAML中声明,然后在后台书写执行代码:
全栈程序员站长
2022/09/12
5.3K0
当啫喱被抹黑时,我看到当下时代关于创新的至暗前景
在写今天这篇文章之前,我想问大家一个问题:我们有多久没有看到一个新的社交APP了? 是的,自从微信之后,我们再也没有看到一个新的全民社交APP了,就连老罗的子弹短信,都快是三年前的事了。 在这里,我只看到了一个现实,那就是在社交APP这一块,我们已经很久很久没有看到创新的存在了。 现在,好不容易看到了一个叫啫喱APP的出现,却在诞生不到一个月后,就迎来了铺天盖地的猜疑和指责,难道我们真的容不下社交软件方面有任何创新了吗? 在讲啫喱APP这个事情之前,我们首先必须树立一个共识,那就是: 垄断乃创新之天敌,竞
罗超频道
2022/03/04
3690
当提到“事件驱动”时,我们在说什么?
去年年底(2016年底),我和ThoughtWorks同事一起参加了一个研讨会,讨论“事件驱动”的本质。在过去的几年里,我们构建的很多系统都大量使用了事件。对于这些系统,人们常常赞誉有加,但批评的声音也不绝于耳。我们的北美办公室组织了一次峰会,来自世界各地的ThoughtWorks资深开发者出席会议并分享了他们的想法。
ThoughtWorks
2019/05/05
5530
当提到“事件驱动”时,我们在说什么?
[WCF-Discovery]服务如何能被”发现”
要让作为服务消费者的客户端能够动态地发现可用的服务,首先的要求服务本身具有可被发现的特性。那么到底一个可被发现的服务和一个一般的服务有何不同呢?或者说如何让一个一般的服务在寄宿的时候能够被它潜在的消费者“探测”到呢? 我们知道,WCF本质上就是消息交换的通信框架。不论是针对普通的服务操作的调用,还是定义在WS-Discovery中的服务的探测(Probe/PM)和解析(Resolve/RM),本质上都是一种消息的交换。它们并没有本质的不同,或者说唯一不同的就是消息的内容,前者是基于某个服务操作的请求和回复,
蒋金楠
2018/02/07
5940
[WCF-Discovery]服务如何能被”发现”
dom啦17 焦点事件
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" name="" id=""> <script type="text/javascript"> let oInput = document.querySelector("input"); // 1.监听input获取焦点 oInput.onfocus=function() { console.log("获取到了焦点"); } // 2
贵哥的编程之路
2020/10/28
1.4K0

相似问题

如何找出哪个DOM元素具有焦点?

2311

IM通讯,当app被关掉和内存被清理的时候,怎么样才能继续收到消息?

1382

发现域名被注册后怎么换新域名?

2272

cdn怎么才能防止被刷?

5799

发现服务器里有进程被锁定,查到了是哪个文件但是找不到文件怎么办?

1129
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
相关问答用户
《用ChatGPT做软件测试》 | 作者擅长5个领域
到家集团 | 技术VP擅长5个领域
擅长3个领域
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档