Javascript函數導致HTML頁面重新載入：爲什麼？

目標：

我打算有一個HTML文本輸入字段作爲一種命令行輸入。
無序的HTML列表顯示了5個最近的命令。點擊這個列表中的最後一個命令應該用命令填充命令行輸入文本字段（以便重新執行或修改它）。
無序的HTML列表包含結果集。點擊此列表中的ID應將相應的ID放入命令行輸入文本字段中。

在HTML（DHTML）： 按預期方式工作：在所述鏈路上點擊時在命令行輸入文本字段中填充了最近命令。

<li><a href="#" id="last_cmd_01" onclick="document.getElementById('cli_input').value = document.getElementById('last_cmd_01').firstChild.nodeValue;document.getElementById('cli_input').focus()">here would be one of the recent commands</a></li>

在JavaScript文件： 不能按預期工作：在命令行輸入文本字段獲取具有相應值填充點擊鏈接時（因爲它應該），但那麼看起來整個HTML頁面正在重新加載，文本輸入字段和所有動態填充的列表都變爲空白。

function exec_cmd(cli_input_str) { 
// a lot of code ... 
// the code that should provide similar behavior as onclick=... in the DHTML example 
$('.spa_id_href').click(function(){document.getElementById('cli_input').value = document.getElementById('cli_input').value + this.firstChild.nodeValue;}); 
}

現在的問題： 另外一個潛在的Javascript（語法）錯誤，什麼可能導致瀏覽器重新加載頁面？

來源

2009-07-06 Roman

變化

$('.spa_id_href').click(function(){...

到

$('.spa_id_href').click(function(evt){...//notice the evt param

，並在功能，來電

evt.preventDefault();

來源

2009-07-06 19:09:19 geowa4

Hi George，是的，它的工作方式。非常感謝！ – Roman 2009-07-06 19:34:45

在這兩種情況下，您都無法取消單擊鏈接的默認功能。

在簡單的HTML示例中，會遵循頁面頂部的鏈接。

您不指定第二個示例的href屬性的樣子，但無論它是什麼，它都將被遵循。

查看http://icant.co.uk/articles/pragmatic-progressive-enhancement/可以很好地解釋事件取消和良好的事件設計。有關jQuery特定指導，請參閱http://docs.jquery.com/Tutorials:How_jQuery_Works。

來源

2009-07-06 19:03:38 Quentin

感謝您的鏈接。看起來我必須先閱讀Javascript才能閱讀，而不知道自己在做什麼;） – Roman 2009-07-06 19:36:06

看來你只是按照鏈接目標網址。那是因爲你沒有阻止默認點擊動作：

e.preventDefault(); // `e` is the object passed to the event handler 
// or 
return false

或者，你可以建立一個HREF開始#，或不使用<a>元素都（使用<span style="cursor:pointer">代替） - 如果它不是一個真正的鏈接當然。

來源

2009-07-06 19:06:21

同意。使用爲此目的感覺有點奇怪（但它並不明顯，還有什麼其他用途......） – Roman 2009-07-06 19:37:59

-1

雖然這裏其他的答案做出關於取消活動優秀點，你還是會碰到問題，如果你的JavaScript包含錯誤，防止您的事件取消代碼運行。（由於可能的情況下，如果你是，比如說，調試代碼。

作爲一個額外的預防措施，我強烈建議你不上的鏈接使用href="#"只觸發腳本，而是使用void操作：

<a href="javascript:void(0)" onclick="...">...</a>

這樣做的原因是：在不取消的情況下，瀏覽器將嘗試加載由href屬性提供的URL的javascript:「協議」告訴瀏覽器，而不是使用的價值。隨附代碼un這個值小於undefined。 The void operator exists explicitly to return undefined，所以瀏覽器停留在現有頁面上 - 無需重新加載/刷新 - 允許您繼續調試腳本。

這也允許你跳過整個事件取消JS鏈接的混亂（儘管你仍然需要取消附加到具有非JS客戶端的「後備」URL的鏈接的代碼中的事件）。

來源

2009-07-06 19:22:02

我不知道這件事。感謝您的詳細解釋。今天我第一次使用了stackoverflow。令人難以置信的是你們是多麼有幫助。願意提供啤酒;） – Roman 2009-07-06 19:51:18

它基本上涉及事件取消... 試試這個：

try { (
    e || window.event).preventDefault(); 
} 
catch(ex) 
{ 
/* do Nothing */ 
}

來源

2009-07-06 20:50:34 kadalamittai

Javascript函數導致HTML頁面重新載入：爲什麼？

回答

相關問題