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

Question

我遇到了这个问题几次，我对我以前使用的解决方案并不满意。

我有一个模糊事件输入框，验证它的内容和一个按钮，它将填充输入框点击。问题在于点击按钮触发输入模糊事件，然后点击按钮点击事件，以便按钮插入的内容不是经过验证的内容。

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

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

Answer 1

我们在工作中遇到了类似的问题。我们在最后的 中发现的是，mousedown事件将在模糊事件 之前触发，从而允许您在验证之前设置内容，甚至取消完全使用标志的验证 过程。

检查这个拨弄我使用例 - 由 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(); 
    }); 

}); 

CNC中

由于@mclin建议，用鼠标按下事件的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'); 
    }); 

}); 

这种解决方案可能是有点清洁，更好的为大多数情况下只需要注意的是，如果你使用它，你会的preventDefault和模糊目前关注的任何其他元素，但对于大多数不应该成为问题的用例。

Answer 2

将输入验证逻辑分离为自己的函数，该函数由blur事件自动调用，然后在修改输入框中的值之后通过单击事件调用。真的，你的验证逻辑会被调用两次，但我没有看到一个方法，没有做出更多的更改。

示例使用jQuery：

$('input').blur(function() { 
    validate(this); 
}); 

$('submit').click(function() { 
    //modify the input element 
    validate(inputElement); 
}); 

var validate = function(obj) { 
    // validate the object 
} 

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

Answer 4

技巧是不使用模糊和点击事件，因为它们总是先按照模糊顺序执行，然后单击第二个。相反，您应该检查焦点元素何时发生变化，因为只有在点击后才会发生变化。

我觉得我有这一个优雅的解决方案：

var alreadyValidated = 'true'; 

setInterval(function(){ 
    if(document.activeElement.id != 'validation-field-id'){ 
     if(alreadyValidated=='false'){ 
      alreadyValidated = 'true'; 
      validate(document.activeElement);  
     } 
    } 
    else { 
     alreadyValidated = 'false'; 
    } 
}, 200); 

这些天所有现代浏览器都支持document.activeElement。

Answer 5

我有比Yoni Jah更好的解决方案： 在按钮的mousedown事件中调用preventDefault。onBlur永远不会发生，所以你可以在点击事件中自由地做任何事情。

这比较好，因为它不会改变点击行为，而是让鼠标向下而不是鼠标向上发生，这可能是意想不到的。

Answer 6

有时在mouseup上获取子对象是有用的，但是父母想要在模糊时隐藏子对象。我们可以取消子元素的隐藏，然后等到我们的鼠标松开时，再用力模糊当我们准备

JS

var cancelHide = false; 

$('.my-input').blur(function() { 
    if (!cancelHide) { 
     $('.my-item').hide(); 
    } 
}); 

$('.my-input').click(function() { 
    $('.my-item').show(); 
}); 

$('.my-item').mousedown(function() { 
    cancelHide = true; 
}); 

$('.my-item').mouseup(function() { 
    var text = $(this).text(); 
    alert(text); 
    cancelHide = false; 
    $('.my-input').blur(); 
}); 

HTML

<input type="text" class="my-input"/> 
<div class="my-item">Hello</div> 
<div class="my-item">Lovely</div> 
<div class="my-item">World</div> 

发生

css

.my-item { 
    display:none; 
} 

https://jsfiddle.net/tic84/on421rxg/

单击列表中的项目将只在鼠标松开警戒，尽管父母极力掩饰他们对模糊