[英]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.
這里有很多問題:
</img>
不存在(在XHTML中是一個東西) <script>
標記中包裝JavaScript,因此它被解釋為HTML 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.