有此代码
<script>
function faul() { alert("faul"); }
</script>
<form>
<button onclick="faul()">action</button>
<input name="faul" required>
</form>
单击按钮会导致faul is not a function，但是当按钮在表单外部或在调用onclick="window.faul()"函数时被调用时。
请解释冲突。
如果您console.log(faul)在点击处理程序中执行，则会看到它faul是对具有相同名称的输入的全局引用。
原因是出于历史原因，（大多数（如果不是全部）浏览器）会通过使具有name属性的任何元素用作该名称的引用来污染运行表单元素的内联事件处理程序的范围。顺便说一句，对于具有id属性的任何元素，在全局范围内也是如此（如下所示）。
使用addEventListener()而不是inline属性添加处理程序将避免此问题（下面还将进行演示）。
document.querySelector('form button').addEventListener('click', function() {
console.log('from addEventListener handler: ', faul);
});<script>
function faul() { alert("faul"); }
</script>
<form>
<button onclick="console.log('from inline handler:', faul)">log faul</button>
<button onclick="console.log(faul2)">log faul2</button>
<input name="faul" required>
<div id="faul2"></div>
</form>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句