[{"data":1,"prerenderedAt":181},["ShallowReactive",2],{"snippet-\u002Fsnippets\u002Fclick-outside":3},{"id":4,"title":5,"body":6,"description":171,"draft":172,"extension":173,"lastModified":174,"meta":175,"navigation":77,"path":176,"seo":177,"stem":178,"tags":179,"__hash__":180},"snippets\u002Fsnippets\u002Fclick-outside.md","Click Outside Listener",{"type":7,"value":8,"toc":169},"minimark",[9,29,165],[10,11,12,13,23,24,28],"p",{},"Uses\n",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FEvent\u002FcomposedPath",[18],"nofollow",[20,21,22],"code",{},"composedPath","\nto detect click outside the target element. This works across (",[25,26,27],"em",{},"open",") Shadow\nDOM too.",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-ts shiki shiki-themes github-dark","const targetEl = document.getElementById(\"#target-element\");\n\ndocument.addEventListener(\"click\", (event) => {\n  if (event.composedPath().includes(targetEl)) {\n    \u002F\u002F Clicked within targetEl\n  } else {\n    \u002F\u002F Clicked outside targetEl\n  }\n});\n","ts","",[20,37,38,72,79,109,129,136,147,153,159],{"__ignoreMap":35},[39,40,43,47,51,54,58,62,65,69],"span",{"class":41,"line":42},"line",1,[39,44,46],{"class":45},"snl16","const",[39,48,50],{"class":49},"sDLfK"," targetEl",[39,52,53],{"class":45}," =",[39,55,57],{"class":56},"s95oV"," document.",[39,59,61],{"class":60},"svObZ","getElementById",[39,63,64],{"class":56},"(",[39,66,68],{"class":67},"sU2Wk","\"#target-element\"",[39,70,71],{"class":56},");\n",[39,73,75],{"class":41,"line":74},2,[39,76,78],{"emptyLinePlaceholder":77},true,"\n",[39,80,82,85,88,90,93,96,100,103,106],{"class":41,"line":81},3,[39,83,84],{"class":56},"document.",[39,86,87],{"class":60},"addEventListener",[39,89,64],{"class":56},[39,91,92],{"class":67},"\"click\"",[39,94,95],{"class":56},", (",[39,97,99],{"class":98},"s9osk","event",[39,101,102],{"class":56},") ",[39,104,105],{"class":45},"=>",[39,107,108],{"class":56}," {\n",[39,110,112,115,118,120,123,126],{"class":41,"line":111},4,[39,113,114],{"class":45},"  if",[39,116,117],{"class":56}," (event.",[39,119,22],{"class":60},[39,121,122],{"class":56},"().",[39,124,125],{"class":60},"includes",[39,127,128],{"class":56},"(targetEl)) {\n",[39,130,132],{"class":41,"line":131},5,[39,133,135],{"class":134},"sAwPA","    \u002F\u002F Clicked within targetEl\n",[39,137,139,142,145],{"class":41,"line":138},6,[39,140,141],{"class":56},"  } ",[39,143,144],{"class":45},"else",[39,146,108],{"class":56},[39,148,150],{"class":41,"line":149},7,[39,151,152],{"class":134},"    \u002F\u002F Clicked outside targetEl\n",[39,154,156],{"class":41,"line":155},8,[39,157,158],{"class":56},"  }\n",[39,160,162],{"class":41,"line":161},9,[39,163,164],{"class":56},"});\n",[166,167,168],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":35,"searchDepth":74,"depth":74,"links":170},[],"Detect a click outside an element with the Event composedPath API. One document listener does the job in TypeScript, and it reaches across open Shadow DOM too.",false,"md","2026-08-29T17:42:32+07:00",{},"\u002Fsnippets\u002Fclick-outside",{"title":5,"description":171},"snippets\u002Fclick-outside","typescript, event, dom","eA1YS9MHGPN7qyLkYSBRBkwBqW1vm_7WLTOq6aEaJRk",1788101292473]