[Z] 從Uncaught SyntaxError: Unexpected token ")" 問題看javascript:void的做用

時間 2019-11-06

標籤 uncaught syntaxerror unexpected token 問題 javascript void 欄目 JavaScript 简体版

原文原文鏈接

https://blog.csdn.net/hongweigg/article/details/78094338javascript

問題
在前端編程中，忽然出現Uncaught SyntaxError: Unexpected token 「）」的錯誤，行號1。這個錯誤真的很隱晦，開始還覺得是其餘JS文件的錯誤，結果發現錯誤原來就存在當前問件中。錯誤場景是這樣的，使用<a>X</a>做爲關閉窗口的按鈕，代碼以下：html

<a href="javascript:void()" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>前端

點完關閉後，就發生了開頭提到的錯誤。java

分析
該HTML段代碼是使用JavaScript腳本動態插入到DOM樹中的，當時並無懷疑到是這個地方的問題，直到搜索類似錯誤時，發現有人也碰到了相似的問題。原來是<a>標籤中腳本缺乏了一個0。express

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>a標籤javascript:void(0)與javascript:void()區別</title>
</head>

<body>
<a href="javascript:void(0)" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>

<a href="javascript:void()" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>
</body>

</html>編程

點第1個「X」時，不報錯，點第2個「X」時報錯，並且錯誤位置爲1行7列，可見，問題出在<a>標籤中的腳本上。
引伸
爲何不加0就報錯呢？看一下void的定義：函數

void 運算符
避免表達式返回值。ui

void expression.net

expression 參數是任意有效的 JScript 表達式。htm

void 運算符對錶達式求值，並返回 undefined.在但願求表達式的值，但又不但願腳本的剩餘部分看見這個結果時，該運算符最有用。

以上爲void的含義，void 其實是一個求職表達式，相似於eval，但不返回任何值。

在<a>標籤中，href屬性能夠執行javascript，但如有返回值，則會發生頁面跳轉，頁面顯示值爲javascript後數據：

<a href="javascript:1" id="__sc_closeBtn" class="closeBtn" title="close">javascript:1</a>
<a href="javascript:'test is ok'" id="__sc_closeBtn" class="closeBtn" title="close">javascript:'test is ok'</a>
這個不會發生跳轉，可是會彈出提示框：
<a href="javascript:alert(2)" id="__sc_closeBtn" class="closeBtn" title="close">javascript:alert(2)</a>
當咱們利用<a>標籤不是爲了頁面跳轉，而是爲了屏蔽頁面跳轉，那麼void函數就派上用場了：

<a href="javascript:void 0" id="__sc_closeBtn" class="closeBtn" title="close">javascript:void 0</a>
實際上，void不使用挎號也徹底是可行的，使用括號是爲了讓代碼編寫得更規範。
void後接任何合法的javascript代碼，均能達到不返回值、頁面不跳轉的效果，但顯然 void 0 是最簡潔的寫法。

注意：

若是是表達式，則須要加上括號：

<a href="javascript:void 9+19" id="__sc_closeBtn" class="closeBtn" title="close">javascript:void 9+19</a> <a href="javascript:void (9+19)" id="__sc_closeBtn" class="closeBtn" title="close">javascript:void(9+19)</a> <a href="javascript:void eval(9+19)" id="__sc_closeBtn" class="closeBtn" title="close">javascript:void eval(9+19)</a> 第1個返回NaN，第二、3個不返回值。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。