2017-05-10 22 views
3

我寫了一個名爲search功能,我希望被點擊該鏈接時調用,如下面的代碼片段顯示:爲什麼這個主播說「搜索不是功能」?

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

但是,代碼並不如我所料,這將導致Uncaught TypeError: search is not a function錯誤(工作在Chrome中)點擊鏈接時。

我試圖記錄search明白爲什麼拋出的錯誤:

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

這個時候,控制檯的每個鏈接被點擊時登錄一個空字符串。令我感到困惑的是search實際上是在其他地方定義爲一個空字符串,使我的函數定義無用。

所以我想知道點擊事件觸發時會發生什麼,什麼時候在search這裏定義?

+0

_「令我百思不解的是,‘搜索’,其實是指在其他地方爲空字符串」 _更改或者功能名稱或變量引用空字符串到不同的標識符應該解決問題,是嗎? – guest271314

+0

內聯函數超越。所以'onclick'指的是_somewhere_空字符串'搜索'導致控制檯輸出。 'search' var必須在'function search()'之後定義,因此將其稱爲方法會導致錯誤。 – Searching

+0

*「讓我感到困惑的是,」搜索「實際上是在其他地方定義爲空字符串」* - 您是否說過其他代碼在某處顯式將'search'定義爲空字符串,或者程序的行爲如如果它被定義在其他地方,即使它不在你的代碼中,你對其他定義可能在哪裏感到困惑? – nnnnnn

回答

2

原來search實際上指的是到a元素的search屬性,它是控制搜索參數的屬性,這恰好是在這種情況下,一個空字符串。這是因爲在HTMLAnchorElement中,它很特殊,因爲它用於創建超鏈接並導航到其他地址,因此search屬性用於通過超鏈接(類似於Location)對象來控制搜索參數。然後設置錨元素的search屬性將依次設置全局的Location實例的window.location.search。這會產生命名衝突,並且由於空字符串不是引發錯誤的函數。

爲函數使用不同的名稱來消除此衝突。需要注意的是,如果你不使用a,你會看到它工作得很好:

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

「搜索」還可以引用「id」設置爲「搜索」的元素。 – guest271314

+0

太棒了!我認爲這是正確的答案。 –

+0

@石英我更新了它。這有點不對 – Li357

0

更改函數的名稱。剛剛嘗試過你的代碼,它改變了函數的名字後就能正常工作。

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

相關問題