Chrome浏览器中mousedown事件的event.buttons属性不生效如何解决？

问题原因 #

你的代码报错是因为触发dontShowDots函数时没有传入事件对象event，导致函数内部读取event时为undefined，后续访问event.buttons自然就会报错。

修复方案 #

1. 修改HTML中的事件绑定代码 #

找到id为square2的img标签，把onmousedown的调用逻辑修改为传入event参数：

<img src="images/white_pawn.png" onmousedown="dontShowDots(event)" onclick="showDots2()" height="75px" width="75px">

2. 补充检查点 #

请确认你的JS代码中已经提前定义了arrayDots变量，且该变量正确指向了两个对应圆点的DOM元素，否则后续操作arrayDots[0]和arrayDots[1]时也会出现未定义报错。

可选优化 #

如果只需要判断左键点击，也可以用event.button属性判断，左键点击对应的button值为0，修改后代码如下，兼容性表现一致：

function dontShowDots(event) {
    if (event.button === 0) {
        arrayDots[0].style.display = "none";
        arrayDots[1].style.display = "none";
    }
}

内容的提问来源于stack exchange，提问作者john fernado