改变布局的JavaScript/jQuery注意事件会导致点击事件不会触发

我有一个字段，当您将注意力放在它上面时，它会更改页面的布局。我在提交表单的页面上也有按钮。改变布局的JavaScript/jQuery注意事件会导致点击事件不会触发

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

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

我想出了一个办法来解决这个IE浏览器，但广泛的研究后，我无法找到/在FF/Chrome中使用相同的对象：

//only works in IE 

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

来源

2013-08-20 codewarrior

IE修复和手动触发点击之间有什么区别：'$（“＃btn_test”）。click（）;'？我的意思是，为什么一个比另一个更好？（为什么不只是触发点击？） – gibberish

页面上有多个按钮和链接会影响到这一点，所以我需要知道用户刚刚单击的元素的ID，以确保我触发了正确的元素。 – codewarrior

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

使用mousedown，而不是click：

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

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

编辑

好吧，我有点更具创意与事件处理程序。 The new solution会跟踪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); 
});

来源

2013-08-20 15:34:17 Fuzzley

通常我们会使用mouseup，所以如果用户忘记了某些东西，他们知道要将鼠标从元素上拖下来取消点击 – pythonian29033

我的担心与pythonians类似，如果用户单击按钮但将鼠标放下（并决定他们不想再单击按钮），他们应该能够在不提交表单的情况下拖动鼠标。 – codewarrior

的确如此，但这有点特殊。强制一个“点击”触发器似乎是一个比只使用mousedown更糟糕的解决方案。 – Fuzzley

改变布局的JavaScript/jQuery注意事件会导致点击事件不会触发

回答

相关问题