4

我今天偶然发现了这一点，由于我不是浏览器专家或网络开发人员，因此我可能错过了一些相当明显的东西。观察下面的简单 HTML：

<html>
  <head>
    <script>
        function ping() {
            console.log('pong');
        }
    </script>
  </head>
  <body>
    <a href="#" onClick="ping()">Call ping</a>
  </body>
</html>

单击链接时，我期望在控制台中打印 pong。但是，我在 Chrome 和 Firefox 中得到的是“TypeError: ping is not a function”。如果我直接从控制台调用该函数，它就可以工作。如果我将 ping 函数重命名为其他任何名称，它就可以工作。如果我用“按钮”标签替换“a”标签，同时离开名为 ping 的函数，它就可以工作！

似乎不知何故，只有在这种特定的组合中：标记“a”的 onClick 与称为 ping() 的函数会导致上述错误。我是疯了还是我刚刚发现了世界上最微不足道的错误？如果它是一个错误，我觉得它发生在 Chrome 和 Firefox 中很奇怪，因为它们有不同的 JavaScript 引擎实现、不同的布局引擎实现等。

4

3 回答 3

1

添加了属性 Ping

可以在 a 和 area 元素上指定新的 ping 属性。

问题：有多种方法可用于跟踪链接上的点击次数以用于广告或 QA 目的。其中许多涉及在跟踪链接之前执行脚本（客户端或服务器端）以执行跟踪。这会掩盖最终用户链接的目的地，强制 UA 在到达目的地之前遵循 HTTP 重定向，和/或要求 Javascript 遵循超链接。

在 w3.org 上阅读更多信息

所以我想这与.. ping 是一个字符串有关..

<a href="#" onclick="alert(typeof ping)">Call ping</a>警报字符串...：/

于 2013-10-18T15:44:59.150 回答
1

我所做的一些测试表明，内联事件处理程序可以直接通过名称访问元素的属性。因此，如果您的函数匹配任何有效的属性名称（并且ping 似乎是HTML5 中的有效属性），就会发生这种情况。

因此，您的代码被解释为尝试对""（的值ping）发出函数调用，但失败了。这只发生在内联事件处理程序中，而不是如果您使用element.onclick=function(){...or addEventListener，因此如果您使用其中一种方法可以避免问题（无论如何建议使用它们，因为内联处理程序违反了关注点分离的原则）。

于 2013-10-18T17:50:21.777 回答
0

请尝试以下，onclick应该都是小的。

<a href="#" onclick="ping()">Call ping</a>

干杯！！

于 2013-10-18T14:33:49.703 回答