Javascript mouseover元素閃爍和未捕獲的TypeError

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

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: 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 （但在IE6-8中則不能使用！），該方法引用添加了事件偵聽器的元素。

function showLabel_icon() {
    // In this particular case "this" is <li class="lb_li">
    this.getElementsByClassName('lb-a-icon')[0].style.display = 'block';
}

JavaScript建議

如果您要堅持使用JavaScript，請改為：

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

最好寫：

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

兼容性

當然，對於IE6-8，您將需要attachEvent和window.event.srcElement 。

Javascript mouseover元素閃爍和未捕獲的TypeError

問題描述

1 個解決方案

解決方案1
0 已采納 2013-04-20 08:20:29

建議的解決方案

TypeError的原因

JavaScript建議

兼容性

Javascript mouseover元素閃爍和未捕獲的TypeError

問題描述

1 個解決方案

解決方案1 0 已采納 2013-04-20 08:20:29

建議的解決方案

TypeError的原因

JavaScript建議

兼容性

解決方案1
0 已采納 2013-04-20 08:20:29