极客观点
项目管理
HarmonyOS
我们都知道mouseup、mousedown、click的执行顺序是mousedown、mouseup、click
现在有这样一段代码
<body>
<input id='ipt1' type="text" value="demo">
<script>
var ipt = document.getElementById('ipt1');
ipt.addEventListener('click', function(e) {
console.log(e.type);
});
ipt.addEventListener('mouseup' ,function(e) {
console.log(e.type);
});
ipt.addEventListener('mousedown', function(e) {
console.log(e.type);
});
</script>
</html>结果：
但是如果把console.log全部换成alert，就仅会触发mousedown
<body>
<input id='ipt1' type="text" value="demo">
<script>
var ipt = document.getElementById('ipt1');
ipt.addEventListener('click', function(e) {
alert(e.type);
});
ipt.addEventListener('mouseup' ,function(e) {
alert(e.type);
});
ipt.addEventListener('mousedown', function(e) {
alert(e.type);
});
</script>
</body>
有人知道为什么吗?
将提示框点掉以后mouseup和click也不会出现。
console 会阻断 js 执行，所以你 mousedown 时触发
alert('mouseDown')，之后的 click 和 mouseup 都因为处于 alert 状态被阻塞了，所以没有能监听到这个状态。你把 mousedown 用 alert， 其他两个用 console 试试大概明白了吧。
再做个实验：依然 mousedown 绑定 alert，其余 console，然后鼠标摁下不送开，触发 alert 后用键盘的 enter 把 alert 关掉，此时再松开鼠标，就能看到 mouseup 和 click 的 console 了。