[英]Javascript/jQuery focusout event that changes layout causes click event to not fire
我有一个字段,当你把焦点放在它上面时,它会改变页面的布局。 我还在页面上有提交表单的按钮。
如果我进入我的字段并键入值,然后单击按钮,按钮单击事件永远不会触发。 这似乎是因为布局在click事件被触发之前发生了变化,这意味着按钮会改变位置。 当click事件触发时,它会在空白区域而不是按钮上触发。
这是问题的一个方面: http : //jsfiddle.net/xM88p/
我找到了一种解决这个问题的方法,但经过大量研究后,我无法在FF / Chrome中找到/访问同一个对象:
//only works in IE
if(event.originalEvent.toElement){
$("#"+event.originalEvent.toElement.id).click();
}
使用mousedown
而不是click
:
$("#btn_test").on('mousedown', function (event){
alert("clicked!");
});
$('#test').focusout(function (event){
$('<p>Test</p>').insertAfter(this);
});
编辑
好的,我对事件处理程序更有创意。 新解决方案会跟踪mousedown / mouseup事件以及点击的位置。 它使用这些值来检查鼠标是否应该执行警报。
var testClicked = false;
var lastX, lastY;
$(document).on('mouseup', function (event) {
if (testClicked === true && lastX === event.clientX && lastY === event.clientY) {
alert("clicked!");
}
testClicked = false;
lastX = null;
lastY = null;
});
$("#btn_test").on('mousedown', function (event){
testClicked = true;
lastX = event.clientX;
lastY = event.clientY;
});
$('#test').focusout(function (event){
$('<p>Test</p>').insertAfter(this);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.