Question

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

＆＃13;

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

＆＃13;

但是，代码无法按预期工作，这会在点击链接时导致Uncaught TypeError: search is not a function错误（在Chrome中）。

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

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

＆＃13;

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

＆＃13;

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

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

Answer 1

事实证明search实际上指的是a元素的search属性，它是一个控制搜索参数的属性，恰好是一个空字符串这个案例。这是因为使用HTMLAnchorElement，它是特殊的，因为它用于创建超链接并导航到其他地址，因此search属性用于通过超链接控制搜索参数（类似于Location）对象。然后，设置锚元素的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>

为什么这个主播说＆＃34;搜索不是一个功能＆＃34;？

3 个答案: