Question

非常简单。我有一个用于触发函数的blur（）事件处理程序，我希望在单击某个元素触发模糊时不触发该函数。

我尝试了document.activeElement，但我得到的是HTMLBodyElement而不是我点击的元素。

代码：

$j(".input_filtrare_camp").blur(
    function(event) {
    nr_img = this.parentNode.id.split("_")[1];
    //alert(document.activeElement);
    if(document.activeElement.id.indexOf("img_exact") < 0) //run only if the id of the element I clicked on doesn't contain "img_exact"
        enter_input_filtrare(event.target);                                                                         
});

警报当然是用于故障排除。

我使用了techfoobar的解决方案如下：

var currElem = null;

$(document).mousedown(function(e) {
    currElem = e.target;
});

$j(".input_filtrare_camp").blur(
    function(event) {
    nr_img = this.parentNode.id.split("_")[1];
    if(currElem.id.indexOf("img_exact") < 0) //run only if the id of the element I clicked on doesn't contain "img_exact"
        enter_input_filtrare(event.target);                                                                         
});

查看PointedEars的答案，了解有关此问题的一些重要信息。

Answer 1

以下代码将告诉您焦点的位置，它需要setTimeout，因为正如其他人所说，当模糊触发时，新元素可能没有获得焦点。但真正的诀窍是知道document.activeElement拥有具有焦点的元素。除了点击

之外，即使焦点因其他原因而发生变化，此答案仍然有效

http://jsfiddle.net/mendesjuan/crenZ/

<强> HTML

<input id="inp1" />
<input id="inp2" />

JS 请参阅Detect which form input has focus using JavaScript or jQuery

$('input').blur(function(){
    // Need a setTimeout
    // There is no guarantee of where the focus went, but after the 
    // current event is processed, it will be available
    setTimeout(function(){
        // The currently focused element 
        console.log(document.activeElement);
    }, 0);
})

Answer 2

检查这个小提琴：

http://jsfiddle.net/pHQwH/

解决方案在文档的mousedown上设置活动元素，该元素是为文档中的所有元素触发的，并使用它来确定是否在模糊事件中执行代码。

<强> CODE

var currElem = null;

$(document).mousedown(function(e) {
    currElem = e.target;
});

$('#f1').blur(function() {
    if(currElem != null && currElem.id != "f3") {
        $(this).val('F1: clicked elem is not f3, blur event worked');
        // do your blur stuff here
    }
    else {
        // for demo only, comment this part out
        $(this).val('F1: clicked elem is f3, no blur event');
    }
});

Answer 3

使用event.target - 目标事件属性产生触发事件的元素。

<html>
<head>

<script type="text/javascript">
  function getEventTrigger(event)
  {
    var x=event.target;
    window.alert("The id of the triggered element: " + x.id);
  }
</script>

</head>
<body >

<p id="p1" onmousedown="getEventTrigger(event)">
Click on this paragraph. An alert box will
show which element triggered the event.</p>

</body>
</html>

Answer 4

单独使用blur事件侦听器是不可能的。 blur事件 - 由它触发 - 在元素失去焦点时发生。 click事件发生在元素获得焦点后，在同一元素的focus事件之后。结果，中间存在一个状态，其中没有元素具有焦点：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>DOM Test Case: Event Order</title>
    <script type="text/javascript">
      function debugEvent (event)
      {
        /* or window.alert(…); */
        console.log(event, "on", event.target || window.event.srcElement);
      }

      function body_load ()
      {
        var elements = document.forms[0].elements;
        var foo = elements["foo"];
        var bar = elements["bar"];
        foo.onblur = bar.onfocus = bar.onclick = debugEvent;
      }
    </script>
  </head>
  <body onload="body_load()">
    <h1>DOM Test Case: Event Order</h1>
    <form action="">
      <div>
        <input name="foo">
        <input name="bar">
      </div>
    </form>
  </body>
</html>

另请参阅：DOM Level 2 Events Specification: HTML Events

您可以做的是为blur事件之前发生的事件使用侦听器。 @techfoobar建议的mousedown事件似乎是这样的事件（在Chromium 18.0.1025.168（Developer Build 134367 Linux）中），但是没有标准，甚至没有草案规范来支持这个事件¹。另见：What is the event precedence in JavaScript?

无论如何，该解决方案是不完整的，因为例如，通过按键（组合）也可以触发blur事件和click事件。处理keydown事件应该会有所帮助，但解决方案仍然不完整。

因此，您的方法很可能是错误的。

¹当然，如果你限制自己使用jQuery和类似的库（$j()调用指示的那些），你也可以自己测试他们声称支持的浏览器子集。但是，您必须使用每个新浏览器以及每个新版本的浏览器和库重新测试它。

怎么能告诉我我点击了哪个元素来触发模糊事件处理程序？

4 个答案: