Question

我正在尝试使用javaScript mouseover和mousout函数从DOM中获取元素。从该event.target中获取子元素，并将样式添加到与指定类名匹配的childNode。

正在发生的问题：

错误：未捕获的TypeError：无法读取未定义的属性“样式”

显示类闪烁。当鼠标移动时，即使用鼠标移动当前的DOM元素。

我试图通过标记名称和childNodes获取元素，以通过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>

CSS

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;
}

THE JS

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();
}

Answer 1

建议的解决方案

我认为，除非问题中没有描述其他逻辑，否则整个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;
}

演示：http://jsfiddle.net/CHTKM/

您还可以使用visibility: hidden;和visibility: visible;

TypeError的原因

event.target引用光标指向的元素。假设您将事件侦听器添加到具有以下HTML结构的<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>内容上时，event.target可能会指向<div class="lb-title">Label List 1</div>，而lb-a-icon没有undefined的任何元素类。试图获取那些不存在的元素导致style显然没有this属性，因此会抛出错误。

要解决此问题，您可以使用function showLabel_icon() { // In this particular case "this" is <li class="lb_li"> this.getElementsByClassName('lb-a-icon')[0].style.display = 'block'; }（但不能在IE6-8！中），它引用了添加事件侦听器的元素。

window.onload = function () {
    Add_DOM_listeners();
}

JavaScript建议

如果你想坚持使用JavaScript，而不是：

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); } }功能可以简化为以下内容：

attachEvent

兼容性

对于IE6-8，当然，您需要window.event.srcElement和{{1}}。

Javascript mouseover Element Flickers＆amp;未捕获的TypeError

1 个答案:

建议的解决方案

TypeError的原因

JavaScript建议

兼容性