为什么点击按钮时我定义的evaluate函数没有被触发调用？

问题根源 #

内联事件的作用域规则和函数命名冲突是问题的核心：

• 浏览器document对象内置了evaluate()方法，专门用于执行XPath查询
• 写在onclick属性里的代码执行时，作用域优先级顺序为「当前元素→document对象→全局window对象」，所以你写的evaluate()会优先调用document的内置方法，而非你自定义的全局函数，自然不会触发你写的逻辑。

解决方法 #

• 方案1：修改自定义函数名，避开和内置方法重名，比如改为handleSubmit

  <button type="submit" onclick="handleSubmit()">Submit</button>
  <script type="text/javascript">
      function handleSubmit(){
          document.write("Working");
      };
  </script>
  

• 方案2：调用时明确指定从全局window对象取你的自定义函数，不需要改函数名

  <button type="submit" onclick="window.evaluate()">Submit</button>
  

• 方案3（更推荐的规范写法）：不使用内联事件绑定，改用addEventListener绑定事件，彻底避免作用域冲突问题，也更便于后续代码维护

  <button type="submit" id="submitBtn">Submit</button>
  <script type="text/javascript">
      const submitBtn = document.getElementById('submitBtn')
      submitBtn.addEventListener('click', function() {
          document.write("Working")
      })
  </script>
  

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