为什么这个主播说“搜索不是一个功能”？

Question

我编写了一个名为search的函数，我希望在单击链接时调用该函数，如下面的代码片段所示：

 <script> function search() { console.log('Searching'); } </script> <a href="#" onclick="search();">Click here</a>

但是，代码无法按预期工作，这会在单击链接时导致此错误（在Chrome中）：

未捕获的TypeError：搜索不是函数

我尝试记录search以查看错误被抛出的原因：

<a href="#" onclick="console.log(search)">Click here</a>

 <script> function search() { console.log('Searching'); } </script> <a href="#" onclick="console.log(search);">Click here</a>

这次，每次单击链接时，控制台都会记录一个空字符串。 令我困惑的是， search实际上被定义为其他地方的空字符串，使我的函数定义无用。

所以我想知道触发点击事件时会发生什么，以及何时定义search ？

Answer 1

事实证明， search实际上是指a元素的search属性，它是一个控制搜索参数的属性，在这种情况下恰好是一个空字符串。 这是因为对于HTMLAnchorElement ，它是特殊的，因为它用于创建超链接并导航到其他地址，因此search属性用于通过超链接（类似于Location ）对象控制搜索参数。 然后，设置anchor元素的search属性将依次设置全局Location实例的window.location.search 。 这会产生命名冲突，因为空字符串不是函数，而是抛出错误。

为该函数使用其他名称以消除此冲突。 请注意，如果你不使用a ，你会发现它工作得很好：

<script>
  function search() { 
    alert("foo"); 
  }
</script>
<div onclick="search();">Click me!</div>

Answer 2

Li357的答案解释了大部分正在发生的事情，但要补充一点，原因就在于此

<a onclick="search();">Click me!</div>

search引用锚点的search属性的结果是内联处理程序有一个隐含with(this)包围它们。 对于翻译，上面看起来有点像：

<a onclick="
  with(this) {
    search();
  }
">Click me!</div>

search是HTMLAnchorElement.prototype一个属性，因此在解释器在window查找属性名称之前，首先找到该属性。

这是非常不直观的。 最好避免内嵌处理器，并避免使用with为好。 您可以使用Javascript正确添加事件侦听器来解决问题：

 function search() { console.log('Searching'); } document.querySelector('a').addEventListener('click', search);

 <a href="#">Click here</a>

Answer 3

更改功能的名称。 刚试过你的代码，一旦我更改了函数的名称就可以了。

<body>
<script type="text/javascript">    
    function test() {
        console.log('Searching');
    }
</script>
<a href="#" onclick="test()">Click here</a>

为什么这个主播说“搜索不是一个功能”？

问题描述

3 个解决方案

解决方案1
4 已采纳 2017-05-10 03:03:52

解决方案2
2 2019-05-22 08:09:47

解决方案3
0 2017-05-10 03:01:57

为什么这个主播说“搜索不是一个功能”？

问题描述

3 个解决方案

解决方案1 4 已采纳 2017-05-10 03:03:52

解决方案2 2 2019-05-22 08:09:47

解决方案3 0 2017-05-10 03:01:57

解决方案1
4 已采纳 2017-05-10 03:03:52

解决方案2
2 2019-05-22 08:09:47

解决方案3
0 2017-05-10 03:01:57