极客观点
项目管理
HarmonyOS
操作疑问
事件在打开elements和打开console时的执行结果不一致的原因
过程描述
给div节点分别通过2种方法添加了2个事件(onmouseover/onmouseout)
移入时背景放大1.2倍,移出时恢复1.0倍且输出节点和X坐标
<body>
<div id="box" onmouseout="fExpand(this)" class='box'></div>
</body>
<script>
// 写在html节点上
function fExpand(t) {
console.log(t, event.clientX);
box.style.transform = 'scale(1)';
}
// DOM 0级事件处理程序
box.onmouseover = function () {
box.style.transform = 'scale(1.2)';
}
</script>显示结果
当点开elements页 操作移出动作时,节点显示scale(1)
当点开console页 操作移出动作时,节点显示scale(1.2)
尝试调整
- 调换移出事件的函数体内容位置(先恢复scale(1),再输出节点),结果还是不一致
- 调换事件书写顺序,先移入后移出,结果依旧不变
- 如果不打开开发者工具,输出节点显示scale(1)
请问是什么原因或者哪里出错导致的?这种执行结果应该怎么理解?
因为 chrome 的控制台打印的对象是半实时的，切换到 Elements 页打印的内容，会在切换到 Console 页才获取，甚至，关闭控制台重新打开，之前打印的内容也会更新为最新内容
可以改为打印字符串，因为字符串是不可变的，或者打印元素的副本