javascript - 在导致模糊的点击事件之后，我应该如何触发 Javascript 模糊事件？

Question

我已经遇到过这个问题几次，而且我对之前使用的解决方案并不满意。

我有一个带有模糊事件的输入框，用于验证其内容，还有一个按钮，单击后将填充输入框。问题是单击按钮会触发输入模糊事件，然后触发按钮单击事件，因此按钮插入的内容不是经过验证的内容。

参见http://jsfiddle.net/jakecr/dL3K3/

我知道这是正确的行为，但我想不出一个干净的方法来解决这个问题。

Answer 1

我们在工作中也遇到过类似的问题。我们最终发现了什么mousedown 事件将在模糊事件之前触发允许您在验证之前设置内容，甚至取消验证完全使用标志进行处理。

检查我用你的例子制作的 fiddle - http://jsfiddle.net/dL3K3/31/

$(function(){
    var flag = true;
    $('input').blur(function(){
        if(!$(this).val() && flag){
            alert("Grrr, It's empty");
        }
    });

    $('button').mousedown(function(){
        flag = false;
    });    
    $('button').mouseup(function(){
        flag = true;
        $('input').val('content').focus();
    });

});

-编辑-

正如@mclin建议的，使用mousedown事件和preventDefault将防止模糊行为。您可以保留原始点击事件不变 -

http://jsfiddle.net/dL3K3/364/

$(function(){
    $('input').blur(function(){
        if(!$(this).val()){
            alert("Grrr, It's empty");
        }
    });

    $('button').mousedown(function(e){
        e.preventDefault();
    });    
    $('button').click(function(){
        $('input').val('content');
    });

});

对于大多数情况，此解决方案可能更干净、更好，只需注意，如果使用它，您将防止当前焦点所在的任何其他元素的默认和模糊，但对于大多数用例来说，这不应该成为问题。