如何在导致模糊的点击事件后触发Javascript模糊事件？

Question

我曾经遇到过这个问题几次,我对以前用过的解决方案不满意.

我有一个带有模糊事件的输入框,可以验证它的内容,还有一个按钮,可以在点击时填充输入框.问题是单击按钮会触发输入模糊事件,然后触发按钮单击事件,因此按钮插入的内容不是验证的内容.

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

我知道这是正确的行为,但我想不出一个彻底解决问题的方法.

Answer 1

我们在工作中遇到了类似的问题.我们最终想到的是mousedown事件将在blur事件之前触发,允许您在验证之前设置内容,甚至完全使用标志取消验证过程.

用我的例子检查这个小提琴 - 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');
    });

});

对于大多数情况,这个解决方案可能会更清洁一点,但是请注意,如果您使用它,您将防止默认并模糊当前焦点的任何其他元素,但对于大多数不应该出现问题的用例.

Answer 2

我有一个比Yoni Jah更好的解决方案:在按钮的mousedown事件上调用preventDefault.onBlur永远不会发生,因此您可以在点击事件中自由地做任何事情.

这样做更好,因为它不会通过鼠标按下而不是鼠标按钮来改变点击行为,这可能是意外的.

Answer 3

这也可能有所帮助:

设置一个计时器,在触发按钮单击事件之前延迟模糊事件操作.

// Namespace for timer var setTimer = { timer: null }

    $('input,select').blur(function () {
        setTimer.timer = setTimeout(function () {
           functionCall();
        }, 1000);
    });

    $('input,select').focus(function () {
        setTimer.timer = setTimeout(function () {
            functionCall();
        }, 1000);
    });

    $("#btn").click(function () {
        clearTimeout(setTimer.timer);
        functionCall();
    });