javascript - onchange 后不会触发 onclick 事件

Question

重新创建此问题的步骤：

1. 在文本框中输入一些内容
2. 键入后立即单击按钮。
3. 我发现只有 onchange 事件被触发了。

代码：

<div>
    <input type="text" onchange="console.log('onchange');$('#message').css('display','none');" >
    <div id="message">
        Validating
    </div>
    <br>
    <input type="button" onclick="console.log('onclick');" value="click me">
</div>

演示

Answer 1

这是因为您正在更改更改按钮位置的布局，并且未调用按钮 mouseup 事件。见演示：

JS斌

如果你想隐藏 div，通过保留它占用的空间，使用：

$('#message').css('visibility','hidden');

隐藏可见性的新演示

Answer 2

由于您的按钮位置变化，它不会调用onclick它，因此有必要发生mouse-down和事件mouse-uponclick

这是完整事件的演示。

Answer 3

您正在寻找 keydown/press/up ...

当用户按下一个键（在键盘上）时，会发生 onkeydown 事件......

<div>
    <input type="text" onkeydown="console.log('onchange');$('#message').css('display','none');" >
    <div id="message">
        Validating
    </div>
    <br>
    <input type="button" onclick="console.log('onclick');" value="click me">
</div>​

这是小提琴

http://jsfiddle.net/zQLFt/1/

Answer 4

点击事件是两个事件 mousedown 和 mouseup 的组合。您可以改用 mousedown。

<div>
    <input type="text" onchange="console.log('onchange');$('#message').css('display','none');" >
    <div id="message">
        Validating
    </div>
    <br>
    <input type="button" onmousedown="console.log('onclick');" value="click me">
</div>