javascript - 查询。更改事件后单击事件不起作用？

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 事件，但不会触发链接单击事件。这是为什么？似乎更改事件正在阻止单击事件？

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;
});​

Answer 2

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

1. 您开始点击“链接”。还没有生成任何事件（甚至没有 mousedown），因为首先浏览器会做一些清理工作：
2. 输入失去焦点并将引发blur事件
3. 输入引发了一个change事件，因为它引发了 ablur并且值发生了变化
4. 您的change事件回调打开一个alert(2)
5. 由于出现新窗口，文档失去焦点
6. 链接永远不会遇到click.

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

Answer 3

用这个

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

Answer 4

onchange 事件仅在元素模糊后触发。因此，当您输入一些文本并首先单击链接时，文本字段上的元素会变得模糊。处理更改事件的最佳方法是让 onkeyup 事件跟踪对文本字段所做的更改。