在帮新人解决问题时无意间发现了这个问题,记录下来给大家分享一下。
请问,下面代码存不存在错误?
<div id="a" style="width: 200px;height: 300px;background: #00FF00;">单击变红色</div> <div id="b" style="width: 200px;height: 300px;background: blue;">双击变黄色</div> <script> let a = document.getElementById("a") let b = document.getElementById("b") a.οnclick = function() { this.style.background = "red" } b.onclick = function() { this.style.background = "yellow" } </script>大家可以新建一个html文件将代码直接粘贴进body里尝试一下。 a的单击事件是不被触发的,而b的可以。
这里我们做个打印验证一下两个div是否都有onclick方法。
console.log("a", a.hasOwnProperty("οnclick")) // false console.log("b", b.hasOwnProperty("onclick")) // false恩?怎么可能都没有呢?那我换种法子。
console.log("a", "οnclick" in a) // false console.log("b", "onclick" in b) // true哦吼,有问题。让我们仔细看看。
console.log("_________div.a________") String("οnclick").split("").forEach(el => { console.log(String(el) + "--" + String(el).charCodeAt()) }) console.log("_________div.b________") String("onclick").split("").forEach(el => { console.log(String(el) + "--" + String(el).charCodeAt()) })打印的结果为:
_div.a_div.bο–959o–111n–110n–110c–99c–99l–108l–108i–105i–105c–99c–99k–107k–107问题找到了,这个 o 有问题。大家如果碰到的话可以留意下。没事儿还能给队友埋俩个坑。
这个bug还可以这么玩,溜了溜了
a["οnclick"] = function() { console.log(1) } b["onclick"] = function() { console.log(2) }如果有更方便的写法欢迎来讨论,让我们一起有条不紊的持续进步。 喜欢的话不妨点个小小的赞与关注,您的赞与关注将是我源源不断的前进动力