Question

如果单击元素的过程导致onchange事件在页面上的其他位置触发，是否有人知道如何使简单的JavaScript onclick事件触发？我创建了一个非常简单的页面来演示这个问题：

<html>
    <body>
        <input type="text" name="test" id="test1" onchange="return change(event);" />
        <a href="#" id="test2" onclick="return bang();">Bang</a>
        <a href="#" id="test3" onclick="return boom();">Boom</a>
        <script type="text/javascript">
            function change(event) {
                alert("Change");
                return true;
            }

            function bang() {
                alert("Bang!");
                return true;
            }

            function boom() {
                alert("Boom!");
                return true;
            }
        </script>
    </body>
</html>

如果你点击爆炸链接就可以获得Bang！警报。 Boom为您提供Boom警报。如果您在文本字段中输入文本并标签，则会获得更改提醒。一切都很好。

但是，如果您在文本字段中输入文字，并且没有首先点击或点击任何其他内容，请单击“轰动”或“轰炸”，即可获得“更改”提醒，而不执行任何其他操作。我希望看到更改警报后跟Bang或Boom。

这里发生了什么？我的更改事件返回true。如何确保点击事件被触发？

Answer 1

问题是alert()函数以某种方式抓住事件链，测试一下：

<html>
<body>
    <input type="text" name="test" id="test1" onchange="return change(event);" />
    <a href="#" id="test2" onclick="return bang();">Bang</a> <a href="#" id="test3" onclick="return boom();">Boom</a>
    <script type="text/javascript">
        function change(event) {
          console.log("change");
            return true;
        }  

        function bang() {
            console.log("bang");
            return true;
        }

        function boom() {
            console.log("boom");
            return true;
        }
    </script>
</body>

您将看到您将在控制台中获得预期的行为。

JSBin

Answer 2

好的......所以似乎是时间进行一些解释。

<强>解释

您遇到此错误，因为只要焦点移离元素，就会触发onchange事件。在您的示例中，焦点远离input元素的操作是mousedown事件，当您单击鼠标时会触发该事件。这意味着，当您在链接上mousedown时，它会触发onchange功能并弹出警报。

另一方面，onclick事件是在mouseup事件上触发的（即当您释放鼠标压力时 - click, hold/pause, release {{1}向您自己证明这一点事件）。回到你的情况......在onlcick（即mouseup）发生之前，焦点将转移到onclick功能触发的alert。

<强>修正

有几种方法可以解决这个问题。最简单的更改是使用onchange到onclick="...."。

或者，您可以使用onmousedown="...."之类的：

setTimeout

我建议首选function change() { setTimeout(function (){ alert("Change event") }, 100) }方法。如果在链接上单击并按住超过规定的超时时间，则onmousedown方法将失败。

Answer 3

我只是在jsFiddle中创建了解决方案，而不是尝试复制您的问题。

我将您的HTML和JavaScript分开。

<强> HTML

<input type="text" name="test1" id="test1" />
<a href="#" id="test2">Bang</a> 
<a href="#" id="test3">Boom</a>

<强>的JavaScript

var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");

test1.onchange = function (event) {
    alert("Change");
};

test2.onclick = function () {
    alert("Bang!");
};

test3.onclick = function () {
    alert("Boom!");
};

在文本框中进行更改后，单击其中一侧将触发onchange事件，onclick事件仍会触发。如果您希望每次关键笔划更改onchange到onkeyup，都会触发更改提醒。

在onchange事件之后onclick事件没有触发

3 个答案: