likes
comments
collection
share

记 HTML 原生属性的一个小坑情景 今天写了段简单的代码，点击div元素时却抛出了这个错误：Uncaught Type

作者站长头像
站长
· 阅读数 18

情景

今天写了段简单的代码，点击div元素时却抛出了这个错误：Uncaught TypeError: translate is not a function。代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <div class="target" onclick="translate()">点击</div>
    <script>
      function translate() {
          console.log('translate');
      }
  </script>
  </body>
</html>

<script> 内明明已经定义了 translate 函数，为什么还会报translate is not a function的错误呢?

问题排查

  1. 把translate函数名改成translate1后，translate1函数就可以正常执行了，说明translate函数是存在的，问题出现在命名上；

  2. 在<script>中通过元素选择器获取dom，注册事件处理函数，translate函数正常执行；

  3. 结合Uncaught TypeError: translate is not a function怀疑div标签onclick方法执行时，查找到的translate并非外部定义的translate函数，onclick执行时的上下文对象应该已经存在translate的定义了，且这个定义是一个属性，而不是函数。

  4. 于是查了下 MDN 的 HTML 属性文档 developer.mozilla.org/en-US/docs/… ；

  5. translate 被用来规定对应元素的属性值及其子文本节点内容，是否跟随系统语言作出对应的翻译变化。

  6. 所以在 JS 执行时，translate指向的是元素的translate属性，因此才会抛出上面的错误。

总结：

  1. 避免直接在 HTML 标签上注册事件处理函数，建议在<script>脚本中处理

document.getElementByClassName('target').onclick=translate or document.querySelector('.target').addEventListener('click',translate)

  1. 避免使用translate作为函数名外，很容易想到另外一个解决方案，通过window.translate调用函数： <div onclick="window.translate()">点击</div>

3.类似容易引起错误的属性名：<a>标签的download属性……

转载自:https://juejin.cn/post/7073395658056532004
评论
请登录