當鼠標不再位於導航鏈接上時，如何調用該函數？

Question

我在我的HTML文件導航這樣的代碼：

<div id="center_links"> 
      <ul> 
       <li><a href="#" onMouseOver="javascript:setSideText(1)">about</a></li> 
       <li><a href="blog" onMouseOver="javascript:setSideText(2)">blog</a></li> 

...等等。

我的JavaScript看起來像這樣：

function setSideText(setting) 
{ 
    if (setting == 0) // Home 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>'; 
    } 
    else if (setting == 1) // About 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>'; 
    } 
    else if (setting == 2) // Blog 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.'; 
    } 

當我將鼠標懸停在鏈接，在我的頁面更改側面文字來描述的鏈接。我不希望鼠標移動到導航鏈接上時，文本會變回默認值（setSideText(0)）。我現在一直在玩這個遊戲，而且我一直沒有弄明白。

我嘗試添加這對JavaScript文件，但無濟於事：

document.getElementById('center_links').onMouseOut = setSideText(0); 

我想這是行不通的，反正。

我確定有一個簡單的解決方案，我沒有想到（我只是拿起語言）。任何指導表示讚賞！

Answer 1

我會想辦法讓兩個主要建議，第一：不要使用內聯事件處理程序（它更易於維護在一個地方你的行爲）和第二在父元素center_links上使用onmouseout。

爲此：

function setSideText(setting) { 
    if (setting == 0) // Home 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>'; 
    } 
    else if (setting == 1) // About 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>'; 
    } 
    else if (setting == 2) // Blog 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.'; 
    } 
} 

var linksElem = document.getElementById('center_links'), 
    links = linksElem.getElementsByTagName('a'); 

for (var i = 0, len = links.length; i < len; i++) { 
    links[i].dataIndex = i+1; 
    links[i].onmouseover = function() { 
     setSideText(this.dataIndex); 
    }; 
} 

linksElem.onmouseout = function(){ 
    setSideText(0); 
} 

JS Fiddle demo。

---

編輯修改setSideText()功能來話作出迴應，而不是一個索引（因爲我認爲這是在日後添加後續環節更容易，並且不依賴於能夠任意屬性添加到元素，儘管它確實要求元素具有id屬性...）：

function setSideText(setting) { 
    if (setting == 'home' || setting == 0) 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>I am an information technology student interested in free and open source software.</p>'; 
    } 
    else if (setting == 'about') 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My name is David Gay, and this is my website. Welcome.</p>'; 
    } 
    else if (setting == 'blog') 
    { 
     document.getElementById('center_text').innerHTML = '<p><div class="dropcap">#</div>My blog runs on the <a href="http://chyrp.net/">Chyrp</a> blog software.'; 
    } 
} 

var linksElem = document.getElementById('center_links'), 
    links = linksElem.getElementsByTagName('a'); 

for (var i = 0, len = links.length; i < len; i++) { 
    links[i].onmouseover = function() { 
     setSideText(this.id); 
    }; 
} 

linksElem.onmouseout = function(){ 
    setSideText(0); 
} 

JS Fiddle demo。

Answer 2

爲什麼這樣做不起作用的唯一原因是因爲在Javascript中設置這些DOM事件時，沒有大寫字母;只需將.onMouseOut更改爲.onmouseout即可。

我不知道他們爲什麼決定在這些事件的HTML和Javascript名稱之間不一致。 （爲什麼人們討厭的DOM還有一個原因，我想。）

Answer 3

您需要觸發功能的onmouseout你觸發功能，以同樣的方式的onMouseOver

您的鏈接HTML需要看起來像這樣：

<a href="blog" onMouseOver="javascript:setSideText(2)" onMouseOut="javascript:setSideText(0)">blog</a> 

我會建議尋找jQuery這樣的東西 - 它使處理事件和DOM操作更直接！

有一個偉大的免費課程這裏：http://tutsplus.com/course/30-days-to-learn-jquery/