当一个'模糊'事件发生时，我如何能找出哪些元件的重点去*向*?

Question

假如我附上一个 blur 功能HTML输入框这样的：

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

有没有办法获得的标识元素引起的 blur 事件(元件其中被点击)内部的功能吗？怎么样？

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

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

如果我点击跨后输入单元已经重点，输入单元将失去其焦点。怎么能知道，这是 mySpan 这是点击?

PS:如果击事件的跨度将发生之前的onblur事件的元件的输入我的问题将得到解决，因为我可能会设置一些状态的价值，指示一个特定的元素已经被点击。

PPS：背景下的这个问题是，我想触发一个阿贾克斯autocompleter控制的外部(从可点击的元)，以显示其建议，不建议立即消失，因为 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中除外）的一个大问题是，在处理 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并未将注意力集中在点击（相对于标签符号）的按钮上。

Answer 2

2015回答：根据用户界面活动，您可以使用事件的 relatedTarget 属性：

  

用于识别辅助 EventTarget 与焦点有关   事件，取决于事件的类型。

对于 blur 活动，

  

relatedTarget ：事件目标获得焦点。

示例：

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之前不支持 relatedTarget （错误962251 ， MDN 。）

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

类型 FocusEvent 实例具有 relatedTarget 属性，但是，直到FF的版本47，具体来说，此属性返回null，从48已经起作用。

您可以在此处查看更多 。

Answer 6

我也试图让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 7

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

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

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

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

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

Answer 8

使用类似的东西：

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 9

我认为这是不可能的， 使用IE，您可以尝试使用 window.event.toElement ，但它不能与firefox一起使用！

Answer 10

如此答案所述，您可以检查 document.activeElement 的值。 document 是一个全局变量，所以你不需要在onBlur处理程序中使用它就可以了：

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

Answer 11

• 文件。activeElement可能是一个父节点(例如身体节点，因为它是在一个临时阶段交换从一目标的另一)，因此它不是用你的范围
• ev。explicitOriginalTarget并不总是有价值

所以最好方式是使用击在体的事件的了解间接你的节点(事件。目标)是在模糊

Answer 12

修改 一个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 13

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

Answer 14

请记住，带有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 15

我一直在玩这个相同的功能，发现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 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

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

 event.currentTarget.firstChild.ownerDocument.activeElement

看起来像“explicitOriginalTarget”对于FF。

Antoine和J

Answer 18

我写了一篇替代解决方案，如何使任何元素都可以集中和“可以接受”。

它基于将元素设为 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指令实现此类功能感兴趣/好奇的人，请看看。

Answer 19

适用于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 20

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

const focusedElement = document.activeElement

https://developer.mozilla.org/en -US /文档/网络/ API / DocumentOrShadowRoot / activeElement

Answer 21

这样：

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

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

Answer 22

，点击 我认为很容易通过jquery传递引用onblur事件的字段引用“this”。
例如，

<input type="text" id="text1" onblur="showMessageOnOnblur(this)">

function showMessageOnOnblur(field){
    alert($(field).attr("id"));
}

由于结果 莫妮卡

Answer 23

你可以这样做：

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