在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>

DEMO

Answer 1

这是因为您正在更改布局，这会更改按钮位置并且不会调用按钮鼠标事件。 见演示：

<强> JS Bin

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

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

<强> New Demo with visibility hidden

Answer 2

对于onclick，由于按钮的位置变化，有必要发生mouse-down和mouse-up事件，而不是onclick

以下是完整事件的Demo。

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

click事件是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>