onclick事件在onchange之后不起作用

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>

演示

- Tony

---

如果您将按钮移出要删除的 DIV，它会起作用 http://jsfiddle.net/mplungjan/edR2E/ - mplungjan

当我在Chrome 24 Mac中尝试时，我得到了两个事件的记录。 - Barmar

<input type="text" onchange="setTimeout(function(){ console.log('onchange');$('#message').css('display','none'); }, 250);"/> <input type="button" onclick="setTimeout(function(){ console.log('onclick'); }, 250);" value="click me"/> - DDK

Answer 1

这是因为您正在更改布局，从而更改了按钮位置，导致鼠标弹起事件未被调用。 请参见演示：

JS Bin

如果您想隐藏div，同时保留它所占据的空间，请使用以下方法：

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

New Demo with visibility hidden

- Akhil Sekharan

---

是的，你说得对。但是你有什么想法来解决这个问题吗？在我的网站上，按钮无法移动到文本框上方。 - Tony

谢谢您的快速回复！但是我不能这样使用，因为我们的客户要求验证消息和位置完全不可见。所以我必须使用“display”属性。 - Tony

你可以将你的 div 元素位置设置在输入框的右侧。 - Akhil Sekharan

Answer 2

对于 onclick，由于按钮位置的更改，需要发生 mouse-down 和 mouse-up 事件，否则不会调用 onclick。

这里是一个完整事件的 演示。

- Zaheer Ahmed

---

我将按钮放在输入框前，然后使用CSS调整按钮到我想要的位置。现在它可以正常工作了。谢谢大家 :)！ - Tony

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/

- bipen

Answer 4

点击事件是由鼠标按下和鼠标松开两个事件组成的。您可以使用鼠标按下事件。

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

- Kashif Naseem