Question

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

我有一个带有onchange事件的textarea。然后我有一个链接到onclick事件的按钮。

当在textarea上触发onchange事件时，将处理放入textarea的文本。这通常发生在我点击textarea之外的东西时。

我做的是以下内容：

我在textarea中输入了一个文本。
输入后，我点击按钮触发按钮上的onclick事件
没有任何事情发生，但是当我点击按钮时，textarea上的onchange事件被触发，但是按钮上的onclick事件本身并没有被触发。

为什么呢？我希望触发onchange和onclick。有什么我需要做的，所以单击按钮不会“丢失”。我意识到我必须点击两次，因为第一次点击会导致textarea上的onchange，然后第二次点击触发点击该按钮。

下面的代码显示了一个例子，只需尝试下面的代码即可。键入文本，然后直接单击该按钮。只会出现“textarea”弹出窗口。

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

  function processButton()
  {
    alert( 'button');
  }
</script>

Answer 1

您需要重新检查您的假设。在您的示例中， alert（）会中断程序流程，从而中断 onclick 的处理。此代码（jsfiddle here）表明默认情况下 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 处理程序而向下滚动。释放鼠标按钮后，该元素未收到 mouseup 事件，并且“click”被中断。

Answer 2

在textarea上处理onblur事件，在按钮上处理onclick事件

Answer 3

尝试将事件监听器添加到组件

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

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

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

在之前触发onchange时未触发onclick事件

3 个答案: