無法觸發onmouseenter事件？

當我直接在html中包含對函數的引用時，我能夠正確地使onmousesenter正常工作，但是讀取的形式很糟糕，想要改進我的代碼 - 但現在我無法讓它運行，儘管我的代碼顯示它觸發功能，我只是不知道爲什麼它的其餘部分未能立即執行：無法觸發onmouseenter事件？

<DOCTYPE! html> 
<head> 
<link rel="stylesheet" type="text/css" href="index.css"> 
<title>Sexism in Silicon Valley</title> 
<script src="index.js"></script> 
</head> 
<body id="body1"> 
<div class="parent"> 
    <img src="kstartup.png" class="logos" id="id1"></img> 
    <img src="uber.png" class="logos" id="id2"></img> 
    <img src="kpcb.png" class="logos" id="id3"></img> 
    <img id="id4" src="r1startup.png" class="logos"></img> 
</div>

使用Javascript（index.js）：

function mouseenter() { 
    alert("hey"); 
    var z = document.getElementsByClassName("parent"); 
    for (var i = 0; i < z.length; i++) { 
     z[i].style.background = "black"; 
    } 
    var bod = document.getElementById("body1"); 
    bod.style.background = "black"; 

} 
document.getElementById("id1").onmouseenter = mouseenter();

的警報後立即熄滅當我加載頁面而不是當我的鼠標進入id1時。爲什麼它不是由我的鼠標輸入ID觸發的？

來源

2015-10-18 Allison Stafford

應該是'<！DOCTYPE html>' –

我改變了這個，它仍然不起作用。 –

您的文檔DOM還沒有準備好當您嘗試訪問ID id1元素時。

document.getElementById("id1").onmouseenter = mouseenter; // Don't execute() 
// Since this code is inside HEAD, JS does not know about any #id1 Element yet.

原因你調用內部<head>的<script>標籤，而不是在閉幕式</body>標記之前的底部。

<script src="index.js"></script> <!-- Makes sure parser readed all the elements --> 
</body> 
</html>

來源

2015-10-18 19:30:38

謝謝，這是我的代碼有問題。 –

@AllisonStafford不客氣。除了！DOCTYPE等錯別字外，還請確保刪除''標籤！ IMG是** Void **元素（如''），並且不接受結束標記！ –

document.getElementById("id1").onmouseenter = mouseenter; // << no() 
// Assign, don't execute.

來源

2015-10-18 19:14:25 LiranBo

你在考慮jQuery選擇器。 –

我解決了這個問題，但它仍然無效。 –

對不起，混淆了jquery ..我的不好 – LiranBo

有相當多的問題在這裏：

的DOCTYPE是不正確
圖片標籤沒有關閉等效於HTML5，即</img>不存在（是一個東西XHTML）
您尚未將您的JavaScript包含在<script>標記中，因此它被解釋爲HTML
您在分配時正在調用mouseenter函數它，所以你實際分配的結果。換句話說，你應該只分配給函數的引用：document.getElementById("id1").onmouseenter = mouseenter

工作示例這裏：http://plnkr.co/edit/fmBIM7U6QSS0cl7vqdlQ?p=preview（顯然圖像將不加載，因爲你只提供相對路徑）

來源

2015-10-18 19:14:52

我解決了這個問題，但它仍然無法正常工作。 –

我應該看起來更難，有很多要解決的地方，我會更新我的回答 –

對不起，jscript是另一個文件，我打電話在腳本標記之間。 –

無法觸發onmouseenter事件？

回答

相關問題