我正在开发一个网站，这里是链接文件:///D:/fahim/HTML/menu/index.html。如果您单击菜单，它会在其自己的“X”按钮上关闭，但我希望通过单击菜单外部来关闭它。这是主页上使用的 javascript。
<script>
var popupView = new popup();
document.querySelector('#btn_1').addEventListener('click', function () {
popupView.show(document.querySelector('#popup_1'));
});
document.querySelector('#btn_2').addEventListener('click', function () {
popupView.show(document.querySelector('#popup_2'), function () {
console.log('show do something');
});
});
document.querySelector('#btn_3').addEventListener('click', function () {
popupView.show(document.querySelector('#popup_3'), '', function () {
console.log('CLOSE');
});
});
</script>这是作为 popup_view.js 文件附加在服务器上的代码
(function () {
var popup = function() {
function hide(dom, dosomething) {
if (!dom) {
console.error('hide function not set dom object');
return;
}
if (dosomething) {
dosomething();
}
dom.className += ' ' + 'popup_hide';
}
function show(dom, dosomethingShow, dosomethingClose) {
if (!dom) {
console.error('show function not set dom object');
return;
}
if (dosomethingShow) {
dosomethingShow();
}
var className = 'popup_hide',
reg = new RegExp('(^|\\b)' +
className.split(' ').join('|') +
'(\\b|$)', 'gi');
dom.className = dom.className.replace(reg, '').trim();
var nodes = dom.childNodes;
for (var i = nodes.length - 1; i >= 0; i--) {
if (nodes[i].className === 'pop_up_close') {
var close = function (e) {
if (dosomethingClose) {
dosomethingClose();
}
dom.className += ' ' + 'popup_hide';
nodes[i].removeEventListener('click', close);
};
nodes[i].addEventListener('click', close);
break;
}
}
}
this.show = show;
this.hide = hide;
};
window.popup = popup;
})();请帮忙，因为我已经尝试了很多代码，除了这些，但没有一个有效
最佳答案
$(document).on('click', function(e){
//your close function
e.stopPropagation();
}
将该代码放在 $(document).ready(... block 中的任意位置
关于javascript - 单击任意位置即可关闭菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36469832/