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

Question

我有:

<input type="text" />

和

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

我想通过点击一个锚元素来防止模糊功能在我"模糊"时运行.

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

这是否容易实现,还是我需要与代表和信号量进行破解？

谢谢

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

请参阅此处的现场示例。