更改布局的Javascript / jQuery focusout事件会导致click事件无法触发

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

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

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

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

//only works in IE if(event.originalEvent.toElement){ $("#"+event.originalEvent.toElement.id).click(); } 

Answer 1

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

使用mousedown而不是click ：

 $("#btn_test").on('mousedown', function (event){ alert("clicked!"); }); $('#test').focusout(function (event){ $('
Test
').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){ $('
Test
').insertAfter(this); });