0

我遇到了这个问题，用户的单个操作应该触发两个事件，但它只触发第一个事件。

场景：

用户在 focusout 上修改布局的特殊字段中输入一些文本，输入文本后，不离开该字段，他们单击一个按钮。

发生了什么？

我在文本框上有一个焦点事件，在按钮上有一个单击事件。我看到的是 focusout 事件被触发，但 click 事件永远不会触发。

我已经将它封装在一个 jsfiddle 中：

http://jsfiddle.net/fCz6X/13/

$('#theText').focusout(function (){
    $("#focusevent").text("Focusevent");
    console.log("focus");
});

$('#theButton').click(function (){
    $("#clickevent").text("Clickevent");
    console.log("click");
});

因此，如果您单击文本字段然后单击按钮，我希望这两个事件都会触发，但我们只看到焦点输出事件。

我通过让 mousedown 事件触发按钮而不是 click 事件（这在 focusout 事件之前触发）对此进行了临时修复，但这会导致一些我不想看到的其他行为和问题。由于这些，我认为最佳解决方案是找到一种方法来同时触发聚焦和点击事件。有没有人对如何解决这个问题有想法？

编辑：在看到最初的响应后，我挖得更深一点，这里的问题是 focusout 事件正在改变页面布局，它非常轻微地将按钮的位置向下推。聚焦完成后会触发单击事件，但由于按钮不再位于完全相同的位置，因此没有任何反应。

这是一个更新的小提琴，显示了我的问题 http://jsfiddle.net/fCz6X/11/

4

4 回答 4

1

这是因为您正在调用alert-focusout事件触发，但在浏览器识别您单击按钮之前，警报框会阻止它。

将您的事件处理程序更改为console.log或其他不引人注目的东西，您会没事的。

于 2013-10-29T15:27:01.413 回答
0

我相信这是因为focusout事件首先触发，执行处理程序，alert然后阻止浏览器识别点击。

再试一次，console.log而不是alert- 它的侵入性较小。

于 2013-10-29T15:29:08.287 回答
0

正如乔所说，阻塞警报呼叫是破坏事件的原因。使用非阻塞调用，您将看到这两个事件。

但是，如果您确实需要执行这样的警报，您可以推迟调用“警报”，直到稍后使用 setTimeout()

$('#theText').focusout(function (){
    setTimeout(function() { // alert after all events have resolved
        alert("focus left text box");
    }, 0);
});

编辑：在您更新的小提琴中，点击事件永远不会触发的原因是因为没有点击事件发生。如果您在 mousedown 时将按钮从鼠标下方移出，则没有后续 mouseup 启动“单击”事件。

您可能需要重新考虑设计的其他方面。您使用“mousedown”的解决方案是您可以实现的最佳解决方案，因为它是唯一实际发生的事件。

于 2013-10-29T15:30:25.560 回答
0

阻止的是警报。某些浏览器安全性可防止同时触发过多的 window.alert。

当尝试使用其他触发器时，它看起来。你可以试试console.log()

$('#theText').on("focusout",function (){
    $("#theText").val($("#theText").val()+"flb");   
});

$('#theButton').on("click",function (){
    $("#theText").val($("#theText").val()+"but");
});
于 2013-10-29T15:34:17.687 回答