Jquery.更改事件后单击事件无效？

Question

有以下示例代码：

<input type="text" id="changeid">
<a href="#" id="clickb">click</a>

<script>
    $('#clickb').on("click", function(event){
        alert(1);                             
        return false;
    });

    $('#changeid').on("change", function(event){
        alert(2);                             
        return false;
    });
</script>

在文本字段中输入内容并立即单击链接时，只会触发 onchange 事件，而不是链接单击事件。为什么会这样呢？看起来 change 事件阻止了 click 事件？

- abiku

Answer 1

它被alert阻塞了。将alert更改为console.log，您会发现两个事件都已触发。

演示。

$('#clickb').on("click", function(event){
    console.log(1);
    return false;
});

$('#changeid').on("change", function(event){
   console.log(2);                             
   return false;
});​

- xdazz

Answer 2

当您编辑输入并单击链接时，内部会发生以下情况：

1. 您开始单击“链接”。尚未生成任何事件（甚至不是 mousedown），因为首先浏览器将执行一些清理工作：
2. 输入框失去焦点并引发 blur 事件
3. 由于触发了 blur 且值已更改，输入框引发 change 事件
4. 您的 change 事件回调打开了一个 alert(2)
5. 文档失去焦点，因为一个新窗口出现了
6. 链接永远不会体验到 click。

解决方案不是使用 alert（如 xdazz 所建议的）。

- Marcel Jackwerth

---

来到这里，遇到了相同的问题，但前提条件不同。值得注意的是，在使用脚本调试器突出显示更改和点击事件时，同样的解释也适用。 - KyleMit

Answer 3

使用这个。

$("#changeid").live('change', function () ...

- Hamid Shoja

Answer 4

onchange事件只有在元素失去焦点后才会触发。因此，当您输入一些文本并首先单击链接时，元素将从文本字段中失去焦点。处理更改事件的最佳方法是使用onkeyup事件来跟踪对文本字段所做的更改。

- mohanrajt