<div id="readability-page-1" class="page"><div id="body"><p><a href="/blog/category/dev">dev</a> |
2024-04-21</p> <div><p>노드가 다른 노드를 포함하고 있는지 확인하고 싶을 때 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/contains"><code>Node.contains</code></a>를 사용한다. 클릭 위치에 따라서 레이어가 열리고 닫히는 동작을 제어하고 싶을 때 유용하게 사용할 수 있다.</p>
<p>버튼 클릭으로 레이어를 열고 레이어가 아닌 다른 곳을 클릭 했을 때 레이어를 닫게 하는 기능은 웹에서 많이 볼 수 있다. 여는 동작은 쉬운데 닫는 동작을 구현 할 때 사용자가 클릭하는 곳을 판단하는 부분이 까다로운 부분이다.</p>

<pre><code>&lt;button&gt;Hello&lt;/button&gt;
&lt;modal&gt;Hello, World!&lt;/modal&gt;

&lt;script&gt;
	const button = document.querySelector('button');
	const modal = document.querySelector('modal');

	button.addEventListener('click', () =&gt; {
		// 버튼을 누를 때 레이어가 열리고 닫히는 동작을 토글한다.
		modal.classList.toggle('on');
	});

	document.documentElement.addEventListener('click', event =&gt; {
		if (button.contains(event.target) || modal.contains(event.target)) {
			// 버튼이나 모달을 클릭했을 때는 닫는 기능을 건너뛴다. 위의 토글만 작동한다.
			return;
		}

		modal.classList.remove('on');
	});
&lt;/script&gt;</code></pre>
<modal>Hello, World!</modal>
<p>클릭 이벤트 핸들러에서 <code>node.contains(event.target)</code>를 사용해서 사용자가 클릭한 부분이 버튼이나 레이어 안인지를 파악할 수 있다.</p>

</div>    </div></div>

신현석(Hyeonseok Shin)

노드가 다른 노드를 포함하고 있는지 확인하고 싶을 때 Node.contains를 사용한다. 클릭 위치에 따라서 레이어가 열리고 닫히는 동작을 제어하고 싶을 때 유용하게 사용할 수 있다.
버튼 클릭으로 레이어를 열고 레이어가 아닌 다른 곳을 클릭 했을 때 레이어를 닫게 하는 기능은 웹에서 많이 볼 수 있다. 여는 동작은 쉬운데 닫는 동작을 구현 할 때 사용자가 클릭하는 곳을 판단하는 부분이 까다로운 부분이다.
<button>Hello</button>
<modal>Hello, World!</modal>
<script>
	const button = document.querySelector('button');
	const modal = document.querySelector('modal');
	button.addEventListener('click', () => {
		// 버튼을 누를 때 레이어가 열리고 닫히는 동작을 토글한다.
		modal.classList.toggle('on');
	});
	document.documentElement.addEventListener('click', event => {
		if (button.contains(event.target) || modal.contains(event.target)) {
			// 버튼이나 모달을 클릭했을 때는 닫는 기능을 건너뛴다. 위의 토글만 작동한다.
			return;
		}
		modal.classList.remove('on');
	});
</script>
Hello
Hello, World!
클릭 이벤트 핸들러에서 node.contains(event.target)를 사용해서 사용자가 클릭한 부분이 버튼이나 레이어 안인지를 파악할 수 있다.

노드 간의 포함관계를 확인하는 contains

댓글