6

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

<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 链接，您将得到 Bang！警报。Boom 为您提供 Boom 警报。而且，如果您在文本字段中输入文本并使用标签，您会收到更改警报。一切都很好。

但是，如果您在文本字段中输入文本，并且没有先使用 Tab 键或单击任何其他内容，则单击 Bang 或 Boom 您会收到更改警报，而没有其他任何内容。我希望看到更改警报，然后是 Bang 或 Boom。

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

4

3 回答 3

3

问题是该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

于 2013-07-16T19:54:48.883 回答
3

好吧……看来是时候解释一下了。

解释

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

onclick另一方面，事件是在事件上触发的（mouseup即，当您释放鼠标上的压力时 - 通过事件向自己证明这一点click, hold/pause, release）onlcick。回到你的情况......在mouseup(ie ) 发生之前，焦点从你的函数onclick移到alert触发。onchange

使固定

有几个选项可以解决此问题。从 usingonclick="...."到 的最简单更改onmousedown="...."。

或者，您可以使用setTimeout类似：

function change() {
    setTimeout(function (){
        alert("Change event")
    }, 100)
}

我建议onmousedown首选该方法。如果您在超时时单击并按住链接超过规定的数量，则该setTimeout方法将失败。

于 2013-07-16T21:54:48.800 回答
0

我没有尝试复制您的问题，而是在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.

于 2013-07-16T20:21:54.707 回答