Javascript鼠标悬停元素闪烁&;未捕获类型错误
我试图使用javaScript mouseover和mousout函数从DOM中获取元素。源于该event.target的子元素,并将样式添加到与指定类名匹配的childNode 正在发生的问题: 错误:未捕获类型错误:无法读取未定义的属性“样式” 显示的类闪烁。当鼠标在当前DOM元素上移动时,即使鼠标在当前DOM元素上移动 我试图通过标记名和子节点过滤元素,以便statemant应用css,但问题仍然存在 这可能是一个简单的解决办法,但我感到困惑 任何援助都将是巨大的 HTML文件Javascript鼠标悬停元素闪烁&;未捕获类型错误,javascript,html,dom,addeventlistener,Javascript,Html,Dom,Addeventlistener,我试图使用javaScript mouseover和mousout函数从DOM中获取元素。源于该event.target的子元素,并将样式添加到与指定类名匹配的childNode 正在发生的问题: 错误:未捕获类型错误:无法读取未定义的属性“样式” 显示的类闪烁。当鼠标在当前DOM元素上移动时,即使鼠标在当前DOM元素上移动 我试图通过标记名和子节点过滤元素,以便statemant应用css,但问题仍然存在 这可能是一个简单的解决办法,但我感到困惑 任何援助都将是巨大的 HTML文件 <!
<!doctype HTML>
<html>
<head>
<title>Gmail Label List</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="func.js"></script>
</head>
<body>
<div id="sideBar-left">
<div class="SbInner-body">
<ul id="label-list">
<li class="lb_li">
<div class="lb-title">Label List 1</div>
<div class="lb-a-icon">
<img src="chevron_expand.png">
</div>
</li>
<li class="lb_li">
<div class="lb-title">Label List 1</div>
<div class="lb-a-icon">
<img src="chevron_expand.png">
</div>
</li>
<li class="lb_li">
<div class="lb-title">Label List 1</div>
<div class="lb-a-icon">
<img src="chevron_expand.png">
</div>
</li>
<li class="lb_li">
<div class="lb-title">Label List 1</div>
<div class="lb-a-icon">
<img src="chevron_expand.png">
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
JS
body
{
background-color: #f0f0f0;
}
div#sideBar-left{
position:relative;
float:left;
width:180px;
}
div.SbInner-body{}
ul#label-list{
background-color: #898989;
width:auto;
height:auto;
overflow: hidden;
}
ul#label-list li {
list-style: none;
cursor:pointer;
background-color: #989898;
width:100%;
height:auto;
overflow: hidden;
}
div.lb-title{
position:relative;
float:left;
height:auto;
width:auto;
padding:5px;
}
div.lb-a-icon{
position:relative;
float:right;
height:15px;
padding:10px;
width:16px;
border:1px solid black;
display: none;
}
function showLabel_icon(element)
{
element.target.getElementsByClassName('lb-a-icon')[0].style.display="block";
}
function closeLabel_icon(element)
{
element.target.getElementsByClassName('lb-a-icon')[0].style.display="none";
}
//[ Listeners]
function Add_DOM_listeners(){
if(window.addEventListener){
var lb = document.getElementById('label-list')
var lb_child = lb.getElementsByClassName('lb_li');
for(var i = 0; i < lb_child.length; i++){
lb_child[i].addEventListener('mouseover',showLabel_icon, false);
}// end for
var lc = document.getElementById('label-list')
var lc_child = lc.getElementsByClassName('lb_li');
for(var j = 0; j < lc_child.length; j++){
lc_child[j].addEventListener('mouseout',closeLabel_icon, false);
}// end for
}// end if
}//end function
window.onload = function(){
Add_DOM_listeners();
}
功能显示标签图标(元素)
{
元素.target.getElementsByClassName('lb-a-icon')[0].style.display=“block”;
}
功能关闭标签图标(元素)
{
element.target.GetElementsByCassName('lb-a-icon')[0].style.display=“无”;
}
//[听众]
函数Add_DOM_listeners(){
if(window.addEventListener){
var lb=document.getElementById('label-list')
var lb_child=lb.getElementsByClassName('lb_li');
对于(变量i=0;i
建议的解决方案
我认为,除非问题中没有描述其他逻辑,否则整个JavaScript部分可以替换为以下CSS声明:
/* By default the icon is not rendered: */
.lb-a-icon {
display: none;
}
/* When <li> is hovered, its icon child is displayed: */
.lb_li:hover .lb-a-icon {
display: block;
}
现在,当您将鼠标悬停在
内容上时,事件.target
可能会指向标签列表1
,该列表没有任何带有lb-a-icon
类的元素。尝试获取那些不存在的元素会导致未定义,显然,它没有style
属性,因此会引发错误
要解决这个问题,您可以使用this
(但不是在IE6-8中!),它引用事件侦听器添加到的元素
function showLabel_icon() {
// In this particular case "this" is <li class="lb_li">
this.getElementsByClassName('lb-a-icon')[0].style.display = 'block';
}
最好写下:
window.addEventListener('load', add_DOM_listeners);
这样做,您就不会有创建附加函数的开销。您还将避免无意中覆盖页面上的任何其他onload
侦听器
此外,您的Add_DOM_listeners
函数可以简化为以下内容:
function Add_DOM_listeners() {
var labelList = document.getElementById('label-list'),
labelChildren = labelList.getElementsByClassName('lb_li'),
ii = labelChildren.length,
i;
for (i = 0; i < ii; i += 1) {
labelChildren[i].addEventListener('mouseover', showLabel_icon);
labelChildren[i].addEventListener('mouseout', closeLabel_icon);
}
}
函数Add_DOM_listeners(){
var labelList=document.getElementById('label-list'),
labelChildren=labelList.getElementsByClassName('lb_li'),
ii=标签长度,
我
对于(i=0;i
兼容性
当然,对于IE6-8,您需要attachEvent
和window.event.srcElement
.lb_li:hover.lb-a-icon{display:block;}
不起作用?我认为event.target应该是event.currentTargetHanks Oleg这解释了很多。关于你关于在css上使用javascript的问题:一旦我通过了这个问题,我打算通过不透明度来设置图标的动画。我必须对此进行研究。问题-对于这些简单的动画,使用javascript比使用css有什么优势吗?@GarveySnow使用css制作动画会带来更好的性能。检查下一页底部的动画指南:
window.addEventListener('load', add_DOM_listeners);
function Add_DOM_listeners() {
var labelList = document.getElementById('label-list'),
labelChildren = labelList.getElementsByClassName('lb_li'),
ii = labelChildren.length,
i;
for (i = 0; i < ii; i += 1) {
labelChildren[i].addEventListener('mouseover', showLabel_icon);
labelChildren[i].addEventListener('mouseout', closeLabel_icon);
}
}