Question

我正在使用纯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";
}

Answer 1

这有效，请参阅更新的小提琴：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";
    }

}

Answer 2

如果你想在“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";
    }
});

Answer 3

我发现了一个失踪的＆＃34;}＆＃34;在第一个window.onclick函数中。此外，我点击了javascript引擎并将加载类型从 onLoad 更改为 no warp head

检查更新的网址https://jsfiddle.net/7wcyz9p5/5/

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

添加两个不执行Javascript的窗口onclick函数

3 个答案: