为什么HTML内联onclick绑定的click函数点击后不触发alert？

内联onclick绑定失效的核心原因 #

这个问题本质是内联事件处理器的作用域优先级规则导致的：

• 写在HTML标签里的onclick内联代码执行时，查找变量/函数的优先级是：当前DOM元素自身的属性和方法 > 全局作用域的变量和方法
• 你自定义的全局函数命名为click，而所有DOM元素本身就自带一个原生的click()实例方法，作用是主动触发元素的点击事件。所以你在内联里写click()时，实际调用的是<p>标签自带的原生click方法，不是你自己定义的全局函数
• 调用原生click()会再次触发当前元素的点击事件，相当于进入了无限触发的死循环，浏览器会直接拦截这种重复调用逻辑，自然不会弹出你预期的提示框

为什么第二种JS绑定的方式可以正常运行 #

你通过document.getElementById绑定事件的代码是写在全局script标签里的，匿名函数执行时查找click函数会直接在全局作用域检索，找到的就是你自己定义的全局函数，所以能正常运行。

内联写法的修复方案 #

有两种简单的修复方式：

• 修改自定义函数名，避开DOM原生方法名，比如把函数改成handleParagraphClick，内联绑定写onclick="handleParagraphClick()"即可
• 内联调用时明确指定全局作用域，写成onclick="window.click()"，强制调用你全局定义的函数

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