改变布局的 Javascript/jQuery focusout 事件导致 click 事件不触发

我有一个字段，当您将焦点放在它上时，它会更改页面的布局。我的页面上还有提交表单的按钮。

如果我进入字段并输入一个值，然后单击按钮，则按钮单击事件永远不会触发。这似乎是因为布局正在改变而发生的before单击事件被触发，这意味着按钮改变了位置。当单击事件触发时，它是在空白区域而不是按钮上触发的。

这是这个问题的一个jsfiddle：http://jsfiddle.net/xM88p/ http://jsfiddle.net/xM88p/

我找到了一种方法来解决 IE 的问题，但经过广泛的研究，我无法在 FF/Chrome 中找到/访问相同的对象：

//only works in IE

if(event.originalEvent.toElement){
  $("#"+event.originalEvent.toElement.id).click();
}

http://jsfiddle.net/xM88p/2/ http://jsfiddle.net/xM88p/2/

Use mousedown代替click:

$("#btn_test").on('mousedown', function (event){
    alert("clicked!"); 
});

$('#test').focusout(function (event){
    $('<p>Test</p>').insertAfter(this);
});

Edit

好吧，我对事件处理程序有了更多的创意。新的解决方案 http://jsfiddle.net/xM88p/7/跟踪 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);
});