当前位置: 首页 > 面试题库 >

当发生“模糊”事件时,我如何找出哪个元素焦点去了*?

曹新觉
2023-03-14
问题内容

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

<input id="myInput" onblur="function() { ... }"></input>

有没有一种方法可以获取导致blur事件触发的元素(在该元素中被单击)在该函数内部的ID ?怎么样?

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

<span id="mySpan">Hello World</span>

如果在输入元素具有焦点之后立即单击范围,则输入元素将失去其焦点。函数如何知道它是mySpan被单击的?

PS:如果跨度的onclick事件发生在输入元素的onblur事件之前,那么我的问题将得到解决,因为我可以设置一些状态值来指示已单击特定元素。

PPS:此问题的背景是,我想从外部(从可单击元素)触发AJAX自动完成器控件以显示其建议,而这些建议不会由于blur输入元素上的事件而立即消失。因此,我想检查blur函数是否已单击一个特定元素,如果已单击,请忽略模糊事件。


问题答案:

嗯…在Firefox中,您可以explicitOriginalTarget用来拉出被单击的元素。我希望toElement对IE也能做到这一点,但似乎无法正常工作…但是,您可以从文档中拉出新集中的元素:

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事件已被处理,并在处理过程中可能根本没有有效的价值!可以通过更改Michiel最终使用的技术来缓解这种情况:

function showBlur(ev)
{
  // 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不会将重点放在 单击的按钮上
(相对于选项卡式)。



 类似资料:
  • 问题内容: 我想用JavaScript找出当前关注的元素。我一直在浏览DOM,但尚未找到我需要的东西。有没有办法做到这一点,怎么做? 我寻找这个的原因: 我正在尝试制作箭头之类的键并浏览输入元素表。选项卡现在可以使用,但是可以输入,默认情况下,箭头没有显示。我已经设置了关键处理部分,但是现在我需要弄清楚如何在事件处理功能中转移焦点。 问题答案: 使用,所有主要浏览器均支持。 以前,如果您试图找出哪

  • 本文向大家介绍拖放元素后,JavaScript中哪个事件发生?,包括了拖放元素后,JavaScript中哪个事件发生?的使用技巧和注意事项,需要的朋友参考一下 该ondrop事件触发时,拖动的元素被丢弃的目标。您可以尝试运行以下代码以了解如何在JavaScript中实现ondrop事件- 示例

  • 问题内容: 我在DIV中有一个下拉菜单。 我希望用户单击其他任何位置时下拉菜单都隐藏。 不管用。 我知道.blur仅适用于这种情况,但是在这种情况下,最简单的解决方案是什么? 问题答案: 我认为问题在于div不会触发该事件。您需要捕获主体上的单击事件,然后确定目标是否为菜单div。如果不是,则用户单击了其他位置,并且需要隐藏div。

  • 问题内容: javascript中是否有办法确定哪个html页面元素具有焦点? 问题答案: 使用该属性。 Chrome 2 +,Firefox 3 +,IE4 +,Opera 9.6+和Safari 4+支持该属性。 请注意,此属性将仅包含接受键击的元素(例如,表单元素)。

  • 本文向大家介绍当拖动的元素位于目标上方时,JavaScript中哪个事件发生?,包括了当拖动的元素位于目标上方时,JavaScript中哪个事件发生?的使用技巧和注意事项,需要的朋友参考一下 当拖动的元素位于放置目标上方时,会触发ondragover事件。 示例 您可以尝试运行以下代码以了解如何在JavaScript中实现ondragover事件-

  • 本文向大家介绍如何找出触发了哪些JavaScript事件?,包括了如何找出触发了哪些JavaScript事件?的使用技巧和注意事项,需要的朋友参考一下 要查看触发了哪些JavaScript事件,请按照以下步骤操作。我们正在Google Chrome网络浏览器上触发事件: 打开谷歌浏览器,然后按 F12键打开“开发工具”。 现在转到“源”选项卡 转到右侧的事件监听器断点: 单击事件并与目标元素进行交