在任意位置单击关闭菜单

Question

I am working on a website and here is the link file:///D:/fahim/HTML/menu/index.html. If you click the menu its closing on its own "X" button, but i want it to close by clicking outside the menu. This is the javascript used on the home page.

 <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>

And this is the code which is attached as popup_view.js file on server

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

Please help as i have tried lot of codes except these but non of them works

Answer 1

$(document).on('click', function(e){
  //your close function
  e.stopPropagation();
}

Put that code anywhere in your $(document).ready(... block