2

非常简单。我有一个触发函数的 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 的回答，了解有关此问题的一些重要信息。

4

4 回答 4

6

下面的代码会告诉你焦点在哪里，它需要一个setTimeout，因为就像其他人所说的那样，当模糊触发时，新元素可能没有获得焦点。不过，真正的诀窍是要知道document.activeElement拥有焦点的元素。即使焦点因单击以外的其他原因而改变，此答案也将起作用

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

HTML

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

​</p>

JS请参阅使用 JavaScript 或 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);
})​
于 2012-06-15T17:17:35.437 回答
2

检查这个小提琴：

http://jsfiddle.net/pHQwH/

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

代码

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');
    }
});
于 2012-05-29T07:36:55.177 回答
1

使用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>
于 2012-05-29T07:22:47.483 回答
0

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 2 级事件规范：HTML 事件

您可以做的是对事件之前发生的blur事件使用侦听器。@techfoobar 建议的mousedown事件似乎是这样的事件（在 Chromium 18.0.1025.168（开发人员构建 134367 Linux）中），但没有标准，甚至没有规范草案来支持它¹。另请参阅：JavaScript 中的事件优先级是什么？

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

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

¹ 当然，如果您将自己限制在 jQuery 和类似库（$j()调用表明），您也可以满足自己在他们声称支持的浏览器子集中进行测试。但是您必须使用每个新浏览器以及每个新版本的浏览器和库重新测试它。

于 2012-05-29T08:29:43.427 回答