Javascript：使用eventListener重新加載頁面點擊

爲了理解JavaScript的最佳實踐，我試圖通過從外部JavaScript文件添加事件偵聽器來重新創建一段內聯JavaScript。Javascript：使用eventListener重新加載頁面點擊

內嵌代碼工作正常，看起來像這樣：

<p id="inline" align="left"> 
This is a body paragraph which changes alignment 
when a user clicks on a link below 
</p> 
<p> 
<a href="" onclick="document.getElementById('inline').setAttribute('align', 'right'); return false;">Align Right</a> 
</p>

關於我的問題，這裏要注意的重要的事情是return false;防止頁面從重裝（我沒有真正知道爲什麼，和止跌不介意發現，特別是如果它涉及到我的問題的解決方案...）。這就是我要的。我不需要重新加載頁面以將文本移到右側。

但是，我不知道什麼是保持頁面重新加載的最佳方式是當我的JavaScript在外部文件中。這是我第一次嘗試的樣子。我開始與HTML，看起來像這樣：

<p id="external" align="left"> 
This is a body paragraph which changes alignment 
when a user clicks on a link below. It uses an 
external .js file. 
</p> 
<p> 
<a href="" id="aRight">Align Right</a> 
</p>

和JavaScript看起來像這樣：

function alignListener() { 
    document.getElementById('external').setAttribute('align', 'right'); 
} 
function installListeners() { 
    var aRight = document.getElementById('aRight'); 
    aright.addEventListener('click', alignListener, false); 
}

這幾乎作品，但不是在所有我怎麼會想到。當我點擊'右對齊'鏈接時，文本短暫地對齊，但是，然後，我按照指向當前頁面的鏈接，將對齊重置回左側。

我找到了一種方法來解決這個問題，通過使用<a href="#" ...而不是<a href="" ...。雖然這不會重新加載頁面（所以文本保持對齊），但它確實將我帶到了頂端，這並不是我想要的。我想要一個類似於return false;的解決方案，它可以與內嵌JavaScript一起工作。有沒有簡單的方法來做到這一點？或者我完全錯了嗎？

來源

2011-01-28 Wilduck

我強烈推薦大多數這些類型的答案的mozilla開發人員網絡。它很容易閱讀，並且可以幫助您瞭解JavaScript和DOM。（JavaScript是好！DOM是彆扭......）

具體而言，對於事件：https://developer.mozilla.org/en/DOM/event

一般來說，https://developer.mozilla.org/

有幾種方法來阻止事件，preventDefault()，stopPropagation()，return false;，或者使用上面建議的JavaScript框架。 jQuery很好，還有很多其他的（YUI，Dojo，MooTools等），他們都努力讓你的JavaScript更加兼容不同的瀏覽器。

來源

2011-01-28 01:51:40 wulftone

+1，非常豐富 – JCOC611 2011-01-28 01:54:25

您可以使用：

function event(e){ 
    var e=window.event||e; 
    //do stuff 
    if(e.preventDefault){e.preventDefault()}else{e.returnValue=false} 
}

注意，這並不需要去上了一個新功能：.addEventListener("click",function(e){/*the above function*/})

交叉兼容事件偵聽器：

if(element.addEventListener){ 
    element.addEventListener(eventName, function, false); 
}else{ 
    element.attachEvent("on"+eventName, function); 
}

來源

2011-01-28 01:40:42 JCOC611

Javascript：使用eventListener重新加載頁面點擊

回答

相關問題