JavaScript的onclick函数在非按钮/锚点的圆形元素上不生效如何解决

问题根因 #

你之前猜测是元素不是button/a标签导致点击无响应，实际上所有DOM元素都支持绑定点击事件，本次问题完全是内联事件的语法错误：你在onclick属性里只写了函数名，没有加括号触发执行，所以点击后不会运行对应逻辑。

修复方法 #

直接修复（成本最低） #

把三个元素的onclick属性都改成带括号的函数调用形式即可：

<zz class="items" id="rock_1" onclick="rock_2()">
    <div class="inside_color">
        <img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-rock.svg" alt="">
    </div>
</zz>
<div class="items" id="paper_1" onclick="paper_2()">
    <div class="inside_color">
        <img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-paper.svg" alt="">
    </div>
</div>
<div class="items" id="scissors_1" onclick="scissors_2()">
    <div class="inside_color">
        <img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-scissors.svg" alt="">
    </div>
</div>

修改完成后点击圆形的彩色外圈、白色内圈都会正常触发对应的逻辑。

可选优化 #

1. 把自定义的<zz>标签换成标准<div>标签，避免极少数场景下自定义标签的事件兼容问题
2. 改用addEventListener绑定事件，实现结构和逻辑分离，更便于后续维护，示例：

// 把这段代码放到script标签里，不需要再写onclick属性
document.getElementById('rock_1').addEventListener('click', rock_2)
document.getElementById('paper_1').addEventListener('click', paper_2)
document.getElementById('scissors_1').addEventListener('click', scissors_2)

内容的提问来源于stack exchange，提问作者Samyak jain