Anonim

Pokud programujete v Javascriptu, pravděpodobně jste narazili na situaci, kdy chcete mít nabídky, které se otevírají po kliknutí a které se zavřou, když uživatel klikne mimo nabídku. Vyvinul jsem docela jednoduchý způsob, jak to udělat. Přidám posluchače událostí do těla dokumentu. Když na něj někdo klikne, hledáme cílové ID události. Pokud se shoduje s ID div boxu, pak nedělejte nic. Pokud tomu tak není, zavřete nabídku.

Vezmeme-li to o něco dále, je neefektivní ponechat posluchače události kliknutí na celém těle, když se nepoužívá. V tomto případě, pokud nabídka ještě nebyla otevřena, není důvod poslouchat kliknutí mimo nabídku. Přidejte posluchače událostí do zpětného volání zobrazené div. Ve stejném duchu, když se div znovu skrývá, odeberte posluchače událostí.

Show Div Klikněte do černé skříňky, nic se nestane. Klikni venku, zmizí $ ('# showbox'). Click (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ('# bigbox'). hide (); }}

Také se ujistěte, že jste do projektu zahrnuli jQuery, protože některé z výše uvedených funkcí tuto knihovnu používají.

Zavřete div nebo nabídku klepnutím mimo w / javascript