javascript - 如何确定哪个 DOM 对象被 jQuery 和模糊事件单击/聚焦？

Question

我有这个 HTML：

<div class="container">
    <a href="#mylink" tabindex="-1">select this</a>
    <a href="#mylink" tabindex="-1">select this</a>
    <a href="#mylink" tabindex="-1">select this</a>
</div>

<a href="#begin" tabindex="-1">click here to begin selecting</a>

我有这段 JS/jQuery 代码片段：

$('a[href="#begin"]').blur(function(e) {
    console.log( e.target.href ); // this will output: #begin
});

所以我需要的.blur是确定在模糊之后哪个元素得到了焦点<a href="#begin">。

JS/jQuery 可以做到这一点吗？

Answer 1

您可以使用该.focus方法检查哪个元素获得焦点，类似于.blur

在你的模糊事件期间，你可以设置一个标志来“注意”下一个控制焦点。在您的焦点功能中，如果设置了此标志，那么您知道您的“存在”字段是最后一个失去焦点的字段。当任何其他字段模糊时，您还需要重置标志。

这是一个简单的概念示例...

var beginWasLast = false;

$('a[href="#begin"]').blur(function(e) {
    e.preventDefault();
    beginWasLast = true;
    console.log( e.target.href ); // this will output: #begin
});

$('a[href="#begin"]').click(function(e) {
    e.preventDefault();
});

$('a:not(a[href="#begin"])').blur(function(e) {
    e.preventDefault();
    beginWasLast = false;
});

$('a:not(a[href="#begin"])').click(function(e) {
    e.preventDefault();
    if(beginWasLast){
        console.log( e.target.href );
    }
});

这是一个工作示例

我添加了e.preventDefault();调用，以便单击链接时页面不会重新加载。

Answer 2

不可能知道哪个元素从blur事件本身获得了焦点。您需要添加一个点击事件来获得它，如下所示：

$('a[href="#begin"]')
    .blur(function(e) {
        console.log( e.target.href ); // previous link href
    });
    .click(function(e) {
        console.log( e.target.href ); // current link href
    });

Answer 3

另一种可能的方法是： SEE DEMO

$('a[href="#begin"]').blur(function(e) {
  setTimeout(function(){console.log( $(document.activeElement).attr('href') );},0); 
});