添加兩個窗口onclick函數不執行Javascript

我正在使用純JavaScript製作漢堡包菜單。添加兩個窗口onclick函數不執行Javascript

我有一個window.onclick函數應該摺疊菜單，當你點擊它之外，這是自己工作正常。

但是，當我添加另一個時，他們都停止工作。我已經改變了變量名，但它不工作

這裏是我所做的，對於代碼的完整副本，請訪問https://jsfiddle.net/7wcyz9p5/

var navcontainerwrapperr = document.getElementById('main_wrapper_box'); 

window.onclick = function(eventexi) { 
if (eventexi.target == navcontainerwrapperr) { 
document.getElementById("mySidenav").style.width = "0"; 
} 

//// if these below lines are removed it works fine 
//// if these below lines are removed it works fine 
var ciever = document.getElementById('bix'); 

window.onclick = function(eventexit) { 
if (eventexit.target == ciever) { 
document.getElementById("mySidenav").style.width = "0"; 
}

來源

2017-07-21 mark

您應該只有1種window.onclick功能。使用else語句if（parameter.target == main_wrapper）{do stuff; {別的東西; } – Bango

小提琴沒有工作（語法錯誤） – trincot

如果你想添加的「的onclick」事件中，你，或許，應該用「的addEventListener」，而不是的onclick功能，因爲如果你使用屬性的「onClick」不止一個監聽器這意味着，後分配第一功能和嘗試分配第二個喲你剛剛改寫第一：

var navcontainerwrapperr = document.getElementById('main_wrapper_box'); 
window.addEventListener('click',function(eventexi) { 
    if (eventexi.target == navcontainerwrapperr) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
}); 

var ciever = document.getElementById('bix'); 

window.addEventListener('click', function(eventexit) { 
    if (eventexit.target == ciever) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
});

但在你的情況下，它也更方便使用點擊聽者的if-else裏面：

var navcontainerwrapperr = document.getElementById('main_wrapper_box'); 
var ciever = document.getElementById('bix'); 
window.addEventListener('click',function(eventexi) { 
    if (eventexi.target == navcontainerwrapperr) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
    if (eventexit.target == ciever) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
});

來源

2017-07-21 17:01:52

感謝您的建議，我已經得到了window.onclick fucntions遍佈我的網站它可能是最好的使用監聽器:) – mark

這工作，請參閱更新的小提琴：https://jsfiddle.net/vineeshmp/7wcyz9p5/2/

var navcontainerwrapperr = document.getElementById('main_wrapper_box'); 

var menu = document.getElementById('menu'); 

var closebtn = document.getElementById('closebtn'); 
window.onclick = function(eventexi) { 
    if (eventexi.target == navcontainerwrapperr) { 
    document.getElementById("mySidenav").style.width = "0"; 
    } 

    if (eventexi.target == menu) { 
    document.getElementById("mySidenav").style.width = "300px"; 
    } 
    if (eventexi.target == closebtn) { 
    document.getElementById("mySidenav").style.width = "0"; 
    } 

}

來源

2017-07-21 16:57:00 Vineesh

感謝它的完美作品 – mark

我發現第一個缺少「}」 window.onclick函數。另外，我點擊了JavaScript引擎，並從的onLoad改變負載類型不經頭

檢查更新URL https://jsfiddle.net/7wcyz9p5/5/

window.onclick = function(eventexi) { 
    if (eventexi.target == navcontainerwrapperr) { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
}

來源

2017-07-21 17:05:13

添加兩個窗口onclick函數不執行Javascript

回答

相關問題