事件監聽一直報錯Cannot set property 'display' of undefined

css ↓

.wechatBtn {position: relative;}
.wechat {position: absolute; top: 24px; right: -1px; display: none;}

js ↓

function wechatBlock (){
            var wechat = document.getElementsByClassName('wechat');
            wechat.style.display = 'block';
            console.log('2');
}
function wechatNone (){
            var wechat = document.getElementsByClassName('wechat');
            wechat.style.display = 'none';
            console.log('3');
}
window.onload = function(){
            var wechatBtn = document.getElementsByClassName('wechatBtn');
            wechatBtn.addEventListener('mouseover',wechatBlock);
            wechatBtn.addEventListener('mouseout',wechatNone);
            console.log('1');
}

html ↓

<a class="wechatBtn" href="#">
              關注微信
              <div class="QRcode wechat">
                    <span>
                    訂閱號
                    </span>
                    <span>
                    商家服務號
                    </span>
              </div>
</a>

事件監聽報錯

一直報錯Cannot set property 'display' of undefined，終於找到緣由，getElementsByClassName('');取出的是一個數組，因此要在後面加上[0],或者用querySelector替代getElementsByClassName('');，因此相似的getElementsByTagName('');等等都會出現這個問題。

因此要這樣寫：

function wechatBlock (){
            var wechat = document.getElementsByClassName('wechat');
            wechat[0].style.display = 'block';
            console.log('2');
}
function wechatNone (){
            var wechat = document.getElementsByClassName('wechat');
            wechat[0].style.display = 'none';
            console.log('3');
}
window.onload = function(){
            var wechatBtn = document.getElementsByClassName('wechatBtn');
            wechatBtn[0].addEventListener('mouseover',wechatBlock);
            wechatBtn[0].addEventListener('mouseout',wechatNone);
            console.log('1');
}

用jQuery寫更簡單：

window.onload = function(){
            $('.wechatBtn').mouseover(function(){
                $('.wechat').show();
            });
            $('.wechatBtn').mouseout(function(){
                $('.wechat').hide();
            });
}

jQuery很好，可是卻有一個小BUG，確切的說這個BUG應該是瀏覽器事件冒泡所形成的——那就是對於有子元素的父親同時使用mouseover和mouseout事件並對其進行效果處理（如fadeIn/Out、slideDown/Up...等等）。

window.onload = function(){
            $('.wechatBtn').mouseover(function(){
                $('.wechat').fadeIn("fast");
            }).mouseout(function(){
                $('.wechat').fadeOut("fast");
            });
}

這段代碼把鼠標移入.wechat後，就會來回的顯示隱藏形成閃爍。不過仍是有辦法的，能夠用hover代替，對執行的動做延遲處理，這樣閃爍的問題就解決了，show()和hide()不須要延遲執行，事件冒泡對他們沒有影響。

window.onload = function(){
        $(.wechatBtn).hover(

            function(){

                var $btn =  $('.wechatBtn');

                t = setInterval(function(){

                    $btn.children().slideDown(300);

                },300);

           },function(){

                clearInterval(t);

                $(this).children().slideUp();

           }

        );

}

問題解決了！