如何在导致模糊的点击事件后触发Javascript模糊事件?
我曾经遇到过这个问题几次,我对以前用过的解决方案不满意。
我有一个带有模糊事件的输入框,可以validation它的内容,还有一个按钮,可以在点击时填充输入框。 问题是单击按钮会触发输入模糊事件,然后触发按钮单击事件,因此按钮插入的内容不会被validation。
见http://jsfiddle.net/jakecr/dL3K3/
我知道这是正确的行为,但我想不出一个彻底解决问题的方法。
我们在工作中遇到了类似的问题。 我们最终想到的是,mousedown事件将在模糊事件之前触发,允许您在validation之前设置内容,甚至完全使用标志取消validation过程。
用我的例子检查这个小提琴 – 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'); }); });
对于大多数情况,这个解决方案可能会更清洁一点,但是请注意,如果你使用它,你将防止默认和模糊当前关注的任何其他元素,但对于大多数不应该成为问题的用例。
我有一个比Yoni Jah更好的解决方案:在按钮的mousedown事件上调用preventDefault。 onBlur永远不会发生,因此您可以在点击事件中自由地做任何事情。
这样做更好,因为它不会通过鼠标按下而不是鼠标按钮来改变点击行为,这可能是意外的。
这也可能有所帮助:
设置一个计时器,在触发按钮单击事件之前延迟模糊事件操作。
// 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(); });
将输入validation逻辑分离为它自己的函数,该函数由blur事件自动调用,然后在修改输入框中的值后由click事件调用。 确实你的validation逻辑会被调用两次,但是我没有看到解决方法而没有进行更多的更改。
使用jQuery的示例:
$('input').blur(function() { validate(this); }); $('submit').click(function() { //modify the input element validate(inputElement); }); var validate = function(obj) { // validate the object }
有时在mouseup上获取子对象很有用,但父对象希望隐藏其子对象模糊。 我们可以取消隐藏子元素,然后等到我们的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
Hello Lovely World
CSS
.my-item { display:none; }
https://jsfiddle.net/tic84/on421rxg/
单击列表项只会在mouseup上发出警报,尽管父母试图在模糊时隐藏它们
诀窍不是使用模糊和点击事件,因为它们总是先按模糊顺序执行,然后单击第二步。 相反,你应该检查有焦点的元素何时发生了变化,因为只有在点击后才会发生这种情况。
我想我有一个优雅的解决方案:
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。