簡體   English   中英

無法觸發onmouseenter事件?

[英]Unable to trigger onmouseenter events?

當我直接在html中包含對函數的引用時,我能夠使onmousesenter正常工作,但是讀取那個糟糕的形式並希望改進我的代碼 - 但是現在我無法讓它運行,盡管我的代碼顯示它確實觸發了這個功能,我只是不確定為什么其余部分現在無法運行:

<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觸發它?

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

這里有很多問題:

  • doctype不正確
  • 圖像標簽在HTML5中沒有結束等價物,即</img>不存在(在XHTML中是一個東西)
  • 您還沒有在<script>標記中包裝JavaScript,因此它被解釋為HTML
  • 您在分配時調用mouseenter函數,因此實際分配結果。 換句話說,您應該只為函數分配一個引用: document.getElementById("id1").onmouseenter = mouseenter

這里的工作示例: http//plnkr.co/edit/fmBIM7U6QSS0cl7vqdlQ?p = preview (顯然圖像不會加載,因為您只提供了相對路徑)

當您嘗試訪問ID id1元素時,您的文檔DOM尚未就緒。

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

因為您在結束</body>標記之前調用<head>內的<script>標記而不是底部。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM