Question

假设我将blur函数附加到HTML输入框，如下所示：

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

有没有办法在函数内部获取导致blur事件的元素的ID（被点击的元素）？怎么样？

例如，假设我有这样的跨度：

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

如果我在输入元素具有焦点后立即单击跨度，则输入元素将失去焦点。函数如何知道点击了mySpan？

PS：如果跨度的onclick事件发生在输入元素的onblur事件之前，我的问题就会解决，因为我可以设置一些状态值，表明已经点击了一个特定的元素。

PPS：这个问题的背景是我想从外部（从可点击的元素）触发AJAX自动完成控件以显示其建议，而由于输入元素上的blur事件，建议不会立即消失。因此，如果单击了一个特定元素，我想检查blur函数，如果是，则忽略blur事件。

Answer 1

嗯......在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" />

警告：这项技术不会用于通过键盘输入 tabbing 引起的焦点更改，并且根本不起作用Chrome或Safari。使用activeElement（IE除外）的一个大问题是，在处理了 {/ 1}}事件之后，它一直没有更新，并且可能根本没有有效值在处理过程中这可以通过the technique Michiel ended up using的变体来缓解：

blur

这应该适用于大多数现代浏览器（在Chrome，IE和Firefox中测试过），但需要注意的是Chrome并未将注意力集中在点击（相对于标签符号）的按钮上。

Answer 2

2015回答：根据UI Events，您可以使用活动的relatedTarget属性：

用于标识与Focus相关的辅助EventTarget 事件，取决于事件的类型。

对于blur事件，

relatedTarget：event target获得关注。

示例：

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);
});

.blurred { background: orange }
.focused { background: lime }

<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

注意Firefox版本48（bug 962251，MDN）之前不会支持relatedTarget。

Answer 3

我最终解决了onblur事件的超时（感谢朋友的建议，而不是StackOverflow）：

<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>

在FF和IE中均可使用。

Answer 4

可以使用mousedown事件而不是模糊：

$(document).mousedown(function(){
  if ($(event.target).attr("id") == "mySpan") {
    // some process
  }
});

Answer 5

The type FocusEvent instances have relatedTarget attribute, however, up to version 47 of the FF, specifically, this attribute returns null, from 48 already works.

You can to see more here.

Answer 6

你能反转你正在检查的内容吗？那就是你记得上次模糊的东西：

<input id="myInput" onblur="lastBlurred=this;"></input>

然后在你的span的onClick中，用两个对象调用function（）：

<span id="mySpan" onClick="function(lastBlurred, this);">Hello World</span>

然后，您的函数可以决定是否触发Ajax.AutoCompleter控件。该函数具有单击的对象和模糊对象。 onBlur已经发生，所以它不会让建议消失。

Answer 7

我也试图让Autocompleter忽略模糊，如果某个特定元素被点击并且有一个可行的解决方案，但是由于explicitOriginalTarget而只针对Firefox

Autocompleter.Base.prototype.onBlur = Autocompleter.Base.prototype.onBlur.wrap( 
        function(origfunc, ev) {
            if ($(this.options.ignoreBlurEventElement)) {
                var newTargetElement = (ev.explicitOriginalTarget.nodeType == 3 ? ev.explicitOriginalTarget.parentNode : ev.explicitOriginalTarget);
                if (!newTargetElement.descendantOf($(this.options.ignoreBlurEventElement))) {
                    return origfunc(ev);
                }
            }
        }
    );

此代码包含默认的onBlur Autocompleter方法，并检查是否设置了ignoreBlurEventElement参数。如果已设置，则每次检查以查看clicked元素是否为ignoreBlurEventElement。如果是，Autocompleter不会对onBlur进行校准，否则它会调用onBlur。唯一的问题是它只适用于Firefox，因为explicitOriginalTarget属性是特定于Mozilla的。现在我试图找到一种与使用explicitOriginalTarget不同的方法。您提到的解决方案要求您手动向元素添加onclick行为。如果我无法解决explicitOriginalTarget问题，我想我会按照你的解决方案。

Answer 8

我认为这是不可能的，使用IE，您可以尝试使用window.event.toElement，但它不适用于Firefox！

Answer 9

document.activeElement可以是父节点（例如正文节点，因为它处于从目标切换到另一个目标的临时阶段），因此它不适用于您的范围
ev.explicitOriginalTarget并不总是有价值的

所以最好的方法是使用onclick on body事件间接理解你的节点（event.target）处于模糊状态

Answer 10

使用类似的东西：

var myVar = null;

然后在你的功能中：

myVar = fldID;

然后：

setTimeout(setFocus,1000)

然后：

function setFocus(){ document.getElementById(fldID).focus(); }

最终代码：

<html>
<head>
    <script type="text/javascript">
        function somefunction(){
            var myVar = null;

            myVar = document.getElementById('myInput');

            if(myVar.value=='')
                setTimeout(setFocusOnJobTitle,1000);
            else
                myVar.value='Success';
        }
        function setFocusOnJobTitle(){
            document.getElementById('myInput').focus();
        }
    </script>
</head>
<body>
<label id="jobTitleId" for="myInput">Job Title</label>
<input id="myInput" onblur="somefunction();"></input>
</body>
</html>

Answer 11

如this answer所述，您可以查看document.activeElement的值。 document是一个全局变量，因此您不必在onBlur处理程序中使用它就可以使用它：

function myOnBlur(e) {
  if(document.activeElement ===
       document.getElementById('elementToCheckForFocus')) {
    // Focus went where we expected!
    // ...
  }
}

Answer 12

适用于Google Chrome v66.x，Mozilla v59.x和Microsoft Edge ...使用jQuery解决方案。

我在Internet Explorer 9中测试但不受支持。

$("#YourElement").blur(function(e){
     var InputTarget =  $(e.relatedTarget).attr("id"); // GET ID Element
     console.log(InputTarget);
     if(target == "YourId") { // If you want validate or make a action to specfic element
          ... // your code
     }
});

在其他Internet Explorer版本中评论您的测试。

Answer 13

修改一个hacky方法是创建一个变量来跟踪你关心的每个元素的焦点。因此，如果您关心'myInput'失去焦点，请在焦点上设置一个变量。

<script type="text/javascript"> var lastFocusedElement; </script> <input id="myInput" onFocus="lastFocusedElement=this;" />

原始答案：你可以将'this'传递给函数。

<input id="myInput" onblur="function(this){ var theId = this.id; // will be 'myInput' }" />

Answer 14

我写了一篇alternative solution如何让任何元素都具有可调焦性，并且可以使用＃34;。

它基于将元素设为contentEditable并隐藏它并禁用编辑模式本身：

el.addEventListener("keydown", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

el.addEventListener("blur", cbBlur);
el.contentEditable = true;

DEMO

注意：在Chrome，Firefox和Safari（OS X）中测试过。对IE不确定。

相关：我正在寻找VueJs的解决方案，所以对于那些对使用Vue Focusable指令感兴趣/好奇如何实现此类功能的人，请take a look。

Answer 15

您可以使用以下方法修复IE：

 event.currentTarget.firstChild.ownerDocument.activeElement

对于FF来说，它看起来像“explicitOriginalTarget”。

Antoine和J

Answer 16

我不喜欢在编写javascript时使用超时，所以我会以与Michiel Borkent相反的方式进行。（没有尝试背后的代码，但你应该明白这一点。）

<input id="myInput" onblur="blured = this.id;"></input>
<span onfocus = "sortOfCallback(this.id)" id="mySpan">Hello World</span>

在这样的头脑中

<head>
    <script type="text/javascript">
        function sortOfCallback(id){
            bluredElement = document.getElementById(blured);
            // Do whatever you want on the blured element with the id of the focus element


        }

    </script>
</head>

Answer 17

我一直在玩这个相同的功能，发现FF，IE，Chrome和Opera都能够提供事件的源元素。我没有测试Safari，但我的猜测是它可能有类似的东西。

$('#Form').keyup(function (e) {
    var ctrl = null;
    if (e.originalEvent.explicitOriginalTarget) { // FF
        ctrl = e.originalEvent.explicitOriginalTarget;
    }
    else if (e.originalEvent.srcElement) { // IE, Chrome and Opera
        ctrl = e.originalEvent.srcElement;
    }
    //...
});

Answer 18

请记住，带有explicitOriginalTarget的解决方案不适用于文本输入到文本输入的跳转。

尝试使用以下文本输入替换按钮，您将看到差异：

<input id="btn1" onblur="showBlur(event)" value="text1">
<input id="btn2" onblur="showBlur(event)" value="text2">
<input id="btn3" onblur="showBlur(event)" value="text3">

Answer 19

我建议使用全局变量blurfrom和blurto。然后，配置您关注的所有元素，以便在它们失去焦点时将它们在DOM中的位置分配给变量blurfrom。另外，配置它们以便获得焦点将变量blurto设置为在DOM中的位置。然后，您可以使用另一个函数来分析blurfrom和blurto数据。

Answer 20

我只看到答案中的黑客，但实际上内置的解决方案非常容易使用：基本上你可以像这样捕捉焦点元素：

const focusedElement = document.activeElement

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

Answer 21

你可以这样做：

<script type="text/javascript">
function myFunction(thisElement) 
{
    document.getElementByName(thisElement)[0];
}
</script>
<input type="text" name="txtInput1" onBlur="myFunction(this.name)"/>

Answer 22

这样：

<script type="text/javascript">
    function yourFunction(element) {
        alert(element);
    }
</script>
<input id="myinput" onblur="yourFunction(this)">

或者，如果您通过JavaScript（在此示例中为jQuery）附加侦听器：

var input = $('#myinput').blur(function() {
    alert(this);
});

修改：抱歉。我误解了这个问题。

当'模糊'事件发生时，我怎样才能找出哪个元素焦点到？

22 个答案:

当'模糊'事件发生时，我怎样才能找出哪个元素焦点*到*？

22 个答案:

当'模糊'事件发生时，我怎样才能找出哪个元素焦点到？