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

Javascript/jQuery focusout event that changes layout causes click event to not fire

本文关键字：事件 改变 Javascript jQuery focusout 布局      更新时间：2023-09-26

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

如果我进入我的字段并键入一个值，然后单击按钮，按钮单击事件永远不会触发。之所以会发生这种情况，是因为在触发点击事件之前，布局发生了更改，这意味着按钮会更改位置。当点击事件启动时，它是在一个空白区域启动的，而不是按钮。

以下是该问题的一部分：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/

使用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);
});
相关文章：