记 HTML 原生属性的一个小坑

·  阅读 803
记 HTML 原生属性的一个小坑

情景

今天写了段简单的代码,点击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属性……

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改