无法触发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事件？

回答

相关问题