如何在jQuery中单击链接时阻止blur（）运行？

Question

我有：

<input type="text" />

和

$('input').blur(function(){
    alert('stay focused!');
});

我想通过点击一个锚元素来阻止模糊功能在我“模糊”时运行。

即。如果我选择另一个输入，点击页面上的某个地方等我想要模糊，但如果我点击一个链接，我不希望它开火。

这是否可以轻松实现，还是我需要与代表和信号量进行黑客攻击？

由于

Answer 1

我今天也必须自己解决这个问题。我发现mousedown事件在模糊事件之前触发，因此您需要做的就是设置一个变量，指示首先发生了mousedown事件，然后再适当地管理模糊事件。

var mousedownHappened = false;

$('input').blur(function() {
    if(mousedownHappened) // cancel the blur event
    {
        alert('stay focused!');
        $('input').focus();
        mousedownHappened = false;
    }
    else   // blur event is okay
    {
        // Do stuff...
    }
});

$('a').mousedown(function() {
    mousedownHappened = true;
});

希望这可以帮助你!!

Answer 2

如果您想将光标保持在contenteditable元素中的位置，只需：

$('button').mousedown(function(){return false;});

Answer 3

稍微延迟模糊。如果查看者单击指向另一个页面的链接，则该页面应在此代码有机会运行之前更改：

$('input').blur(function(){
    setTimeout(function() {alert('stay focused!');}, 1000);
});

您可以试验超时的延迟值是否合适。

Answer 4

您可以通过在被单击的控件的preventDefault()事件中调用mousedown来获得此行为（否则将获得焦点）。例如：

btn.addEventListener('mousedown', function (event) {
  event.preventDefault()
})

btn.addEventListener('click', function(ev) {
    input.value += '@'
    input.setSelectionRange(ta.value.length, ta.value.length)
})

请参见live example here。