在之前触发更改时未触发 onclick 事件

onclick event not triggered when onchange triggered right before

本文关键字：onclick 事件      更新时间：2023-09-26

>我这里有一个有趣的问题。

我有一个文本区域，其中包含链接到它的 onchange 事件。然后我有一个链接到onclick事件的按钮。

当在文本区域上触发 onchange 事件时，将处理放入文本区域的文本。这通常发生在我单击文本区域之外的内容时。

我所做的是以下几点：

  1. 我在文本区域中输入了文本。
  2. 键入后，我单击按钮以触发按钮上的onclick事件
  3. 没有任何反应，但是当我单击按钮时，文本区域上的 onchange 事件被触发，但按钮本身上的 onclick 事件不会被触发。

为什么？我希望同时触发更改和单击。我需要做什么，这样按钮的点击就不会"丢失"。我意识到我必须单击两次，因为第一次单击会导致文本区域发生变化，然后第二次单击触发单击按钮。

下面的代码

显示了一个示例，只需尝试下面的代码。输入文本，然后直接单击该按钮。只有"文本区域"弹出窗口会出现。

<textarea onchange="processText();" name="mytext"></textarea>
<button onclick="processButton();">Hello</button>
<script language="Javascript">
  function processText()
  {
    alert( 'textarea');
  }
  function processButton()
  {
    alert( 'button');
  }
</script>

你需要重新检查你的假设。在您的示例中，alert（） 中断了程序流，中断了对 onclick 的处理。这段代码（这里的jsfiddle）表明onchange默认情况下不会干扰onclick： 

<textarea onchange="processText();" name="mytext"></textarea>
<button onclick="processButton();">Hello</button>
<div id="clicked"></div>
<div id="changed"></div>
<script language="Javascript">
  function processText()
  {
    document.getElementById('changed').innerHTML = "onchange fired";;
  }
  function processButton()
  {
    document.getElementById('clicked').innerHTML = "onclick fired";
  }
</script>​

我遇到了类似的问题，但是未处理onclick事件的实际原因是由于onchange处理程序，被单击的元素向下滚动。释放鼠标按钮时，元素未收到鼠标向上事件，并且"单击"被中断。

在文本区域上处理 onblur 事件，在按钮上处理 onclick 事件

尝试这样做将事件侦听器添加到组件 

document.getElementsByTagName("textarea")[0].addEventListener("change", function(){
    alert( 'textarea');
});
document.getElementsByTagName("button")[0].addEventListener("click", function(){
    alert( 'button');
});

如果定义了 Id，则使用 getElementById（）。

相关文章：