前端 - 事件绑定时，用console.log有效，用alert失效
本文介绍了前端 - 事件绑定时，用console.log有效，用alert失效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我们都知道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 了。
这篇关于前端 - 事件绑定时，用console.log有效，用alert失效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
