3

我有一个有趣的问题。

我有一个与它相关联的 onchange 事件的文本区域。然后我有一个链接到 onclick 事件的按钮。

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

我所做的是以下内容：

  1. 我在文本区域中输入了一个文本。
  2. 输入后立即单击按钮以触发按钮上的 onclick 事件
  3. 什么都没有发生，但是当我单击按钮时，textarea 上的 onchange 事件被触发，但按钮本身的 onclick 事件没有被触发。

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

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

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

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

3 回答 3

4

你需要重新检查你的假设。在您的示例中，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处理程序而向下滚动。当鼠标按钮被释放时，元素没有收到mouseup事件并且“点击”被中断。

于 2013-01-04T11:33:36.610 回答
2

处理 textarea 上的 onblur 事件和按钮上的 onclick 事件

于 2012-05-23T11:21:00.037 回答
0

试试这个向组件添加事件监听器

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

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

如果定义了 Id，则使用getElementById()。

于 2015-07-16T05:21:37.063 回答