单用户行动发射两个事件 - 第二个事件不会触发

我遇到了这个问题，其中用户的单个动作应该触发两个事件，但它只触发第一个事件。单用户行动发射两个事件 - 第二个事件不会触发

场景：

用户输入一些文本到一个特殊字段修改布局对事件的内容，输入文字，而无需离开后场，他们点击一个按钮。

发生了什么事？

我在文本框上单击事件，然后单击按钮上的事件。我所看到的是专注事件被解雇，但点击事件从来没有。

我这个包裹在一个的jsfiddle：

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

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

所以，如果你在文本框中单击然后单击我期望这两个事件来触发按钮，但我们只看到焦点事件。

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

编辑：看到最初的反应之后，我挖得更深一些，这里的问题是，事件的内容事件改变页面布局，非常轻微地按下按钮的位置下来。点击事件在聚焦完成后触发，但由于按钮不再位于完全相同的位置，因此不会发生任何事情。

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

来源

2013-10-29 codewarrior

http://jsfiddle.net/fCz6X/8/使用的console.log – megawac

改变了你的代码将文本添加到页面insted的警报的 - 工作正常[这里]（HTTP：// jsfiddle.net/fCz6X/9/） – 2013-10-29 15:31:50

@MikeW文本实际上已经实际移动按钮，例如）http://jsfiddle.net/fCz6X/10/ – codewarrior

这是因为你调用alert - 在focusout事件触发，但浏览器识别之前你点击该按钮，警告框阻止它。

将您的事件处理程序更改为console.log或其他非突兀的东西，您就可以。

来源

2013-10-29 15:27:01

谢谢，深入挖掘一点后，我看到了实际的问题。我的专注事件实际上是在做一些自定义事件并处理请求和响应，点击事件正在提交一个表单。我认为这个问题实际上可能与页面布局的变化有关。聚焦事件发生后，该按钮不再位于同一地点，因此单击事件不会触发任何事件。让我看看我是否可以将它封装在一个新的小提琴中。 – codewarrior

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

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

来源

2013-10-29 15:29:08

你是什么意思的寄存器？如果你的意思是事件处理程序没有被创建，那是不正确的。如果你的意思是说浏览器没有意识到发生了点击，那么是的。你可以编辑澄清？ –

对不起，我感到困惑。我的意思是浏览器无法识别点击事件。我会更新我的答案，以便更清楚。谢谢！ –

正如乔所说，阻塞警报呼叫是什么打破事件。使用非阻塞呼叫您将看到两个事件。

如果你真的需要执行这样的警告，不过，你可以推迟调用“警报”，直到后来使用的setTimeout（）

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

编辑：在更新后的提琴的原因click事件从未发生火灾是因为没有发生点击事件。如果您在mousedown下将按钮从鼠标下移出，则不会有任何后续鼠标启动“点击”事件。

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

来源

2013-10-29 15:30:25

这是阻止的警报。某些浏览器安全防止当时触发太多的window.alert。

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

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

$('#theButton').on("click",function(){ 
    $("#theText").val($("#theText").val()+"but"); 
});

来源

2013-10-29 15:34:17 gasp

单用户行动发射两个事件 - 第二个事件不会触发

回答

相关问题