為什么80%的碼農都做不了架構師？>>> ??

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

???????????}

????????);

}

問題解決了！

轉載于:https://my.oschina.net/af666/blog/753796

總結

以上是生活随笔為你收集整理的事件监听一直报错Cannot set property 'display' of undefined的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。