我应该如何在导致模糊的点击事件之后触发Javascript模糊事件?
我已经遇到过几次这个问题,我对以前使用的解决方案不满意 我有一个带有模糊事件的输入框,用于验证输入框的内容,还有一个按钮,单击后将填充输入框。问题是单击按钮会触发输入模糊事件,然后单击按钮事件,因此按钮插入的内容不是验证的内容 看我应该如何在导致模糊的点击事件之后触发Javascript模糊事件?,javascript,jquery,events,onclick,onblur,Javascript,Jquery,Events,Onclick,Onblur,我已经遇到过几次这个问题,我对以前使用的解决方案不满意 我有一个带有模糊事件的输入框,用于验证输入框的内容,还有一个按钮,单击后将填充输入框。问题是单击按钮会触发输入模糊事件,然后单击按钮事件,因此按钮插入的内容不是验证的内容 看 我知道这是正确的行为,但我想不出一个干净的方法来解决这个问题。将输入验证逻辑分离到它自己的函数中,该函数由模糊事件自动调用,然后在修改输入框中的值后由单击事件调用。确实,您的验证逻辑将被调用两次,但我认为如果不做更多的更改,就无法解决这个问题 使用jQuery的示例:
我知道这是正确的行为,但我想不出一个干净的方法来解决这个问题。将输入验证逻辑分离到它自己的函数中,该函数由模糊事件自动调用,然后在修改输入框中的值后由单击事件调用。确实,您的验证逻辑将被调用两次,但我认为如果不做更多的更改,就无法解决这个问题 使用jQuery的示例:
$('input').blur(function() {
validate(this);
});
$('submit').click(function() {
//modify the input element
validate(inputElement);
});
var validate = function(obj) {
// validate the object
}
这也可能有助于:
设置一个计时器,在触发按钮单击事件之前延迟模糊事件操作
// 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();
});
诀窍是不要使用“模糊”和“单击”事件,因为它们总是按照“模糊第一,单击第二”的顺序执行。相反,您应该检查具有焦点的元素何时发生了更改,因为只有在单击之后才会发生更改 我想我有一个优雅的解决方案:
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。我们在工作中遇到了类似的问题。我们最后发现了什么 mousedown事件将在blur事件之前触发 允许您在验证之前设置内容,甚至取消验证 完全使用标志进行处理 检查一下我用你的例子做的小提琴- -编辑- 正如@mclin所建议的,使用mousedown事件和preventDefault将防止模糊行为。 您只需保留原始单击事件的完整性-
这个解决方案可能会更干净,对大多数情况下更好。请注意,如果您使用它,您可以防止当前关注的任何其他元素出现默认和模糊,但对于大多数情况,这不应该是一个问题。我有一个比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();
});
这更好,因为它不会通过使事情发生在鼠标下而不是鼠标上而改变单击行为,这可能是意外的。有时在鼠标上获取子对象很有用,但父对象希望在模糊上隐藏其子对象。我们可以取消隐藏子元素,然后等待鼠标移动,然后在准备就绪时强制模糊 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();
});
.my-item {
display:none;
}
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>
单击列表项只会在鼠标悬停时发出警报,尽管家长试图在模糊时隐藏它们您的问题不清楚?您的问题和期望的解决方案是什么?基本上,一个用户操作导致两个事件按顺序触发,但第二个用户操作依赖于第一个用户操作。我考虑过使用setTimeout延迟第一个事件,但这似乎不是一个理想的解决方案。我以一种相当普遍的形式提出了这个问题,因为我在不同的情况下遇到过多次这个问题。无论你做什么,如果焦点从一个元素变为另一个元素,第一个元素的
模糊
事件将在第二个元素的聚焦
或单击
之前触发。也许您应该使用change
事件?然后,它可能会在按钮的单击之前对其进行评估,然后在单击之后再次评估?(未测试)不完全是我想要的解决方案,因为模糊事件仍然被触发,但我认为不可能完全按照我的要求执行。您应该使用true
和false
而不是字符串,因为Boolean('false')==true
“优雅的解决方案”和setInterval不属于同一个帖子。这是一个聪明的解决方案。这是最好的解决方案。这正是我想要的。mousedown事件会导致提交发生,无论验证结果如何。请看这里@DragonFire这与此问题或mouswdown无关。您的代码正在异步运行,并且您将其视为同步代码
.my-item {
display:none;
}