当用户立即单击按钮时，onchange输入字段上的按钮onclick不触发 [英] Button onclick doesn't fire after onchange input-field when user immediately clicks the button

问题描述

我有一个带有onchange事件的输入文本，它调用一个显示警告框的函数。我也有一个按钮，其onclick调用不同的功能。如果用户更改输入文本并立即单击按钮，则onchange事件触发，显示警报框，但不会执行onclick按钮的函数中的代码。我读过这与事件冒泡有关，但我还没有看到任何解决方案。有解决方案吗？是甚么可能？

以下是一个例子：

 < input type = textonchange =showAlert1（）> 
< input type =buttonid =al2value =点击这里onclick =showAlert2（）> 
 
< script type =text / javascript> 
 
 function showAlert1（）
 {
 alert（ONE）
} 
 
 function showAlert2（）
 {
 alert（TWO）; 
} 
 
< / script> 
 

如果对输入值进行更改，则onClick事件处理程序showAlert2（）用户立即点击按钮。
我想要的是，在输入字段中输入内容，点击立即按钮，然后触发

alert（ONE）AND alert ）...

或仅

解决方案

据我所知，这不是冒泡的问题（这是 ，但在这种情况下是一个红色的鲱鱼）。问题是更改字段值后点击按钮会触发 blur ，导致 showAlert1（）

这是一个简单的例子，它的工作方式你描述，但你会看到它的一个不可靠的黑客比任何东西。基本上它缓冲每个函数的执行，以便可以触发按钮的 onclick 。但是，如果单击并按住按钮的时间长于通过 setTimeout（）在每个函数中设置的缓冲区，则会消失。

  function showAlert1（）{
 setTimeout（function（）{alert（ONE）}，250）; 
} 
 
 function showAlert2（）{
 setTimeout（function（）{alert（TWO）}，250）; 
} 
  

演示： jsfiddle.net/5rTLq

I have an input text with an onchange event that calls a function in which an alert box displays. I also have a button whose onclick calls a different function. If the user makes a change in the input text and immediately clicks the button, the onchange event fires, displaying the alert box, but the code in the function for the onclick of the button doesn't execute. I've read that this has something to do with event bubbling, but I haven't seen any solutions. Is there a solution? Is it even possible?

Here is a little example:

<input type = "text" onchange = "showAlert1()">
<input type = "button" id = "al2" value = "Click Here" onclick = "showAlert2()">

<script type = "text/javascript">

function showAlert1() 
{
    alert("ONE")
}

function showAlert2() 
{
    alert ("TWO");
}

</script>

The onclick event handler showAlert2() doesn't fire if a change is made to the input value and user immediately clicks the button. I want, that you write something to the input-field, click IMMEDIATELY the button and it fires

alert("ONE") AND alert("TWO")...

OR ONLY

alert("TWO")

解决方案

As far as I can tell it's not a problem with bubbling (which is a problem with onchange but is a red herring in this case). The problem is that clicking the button after changing the field value is triggering blur, causing showAlert1() to run before the button's onclick gets triggered.

Here's a quick example of it working the way you described but you'll see it's an unreliable hack more than anything. Basically it buffers the execution of each function so that the button's onclick can be triggered. However it falls over if you click and hold the button longer than the buffer that is set within each function via setTimeout().

function showAlert1() {
    setTimeout(function(){ alert("ONE") }, 250);
}

function showAlert2() {
    setTimeout(function(){ alert("TWO") }, 250);
}

Demo: jsfiddle.net/5rTLq

这篇关于当用户立即单击按钮时，onchange输入字段上的按钮onclick不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！