[JavaScript, Vue]details/summary 태그 toggle 기능 막기

 

문제점

보통 details와 summary 태그를 이용하게 되면, A를 클릭하든, B를 클릭하든 toggle 이벤트가 발생하여 숨겨져있는 내용이 나오게 됩니다. 하지만, A만 클릭했을 때는 다른 이벤트가 발생하고 B를 클릭해야지 toggle 이벤트가 발생되게 하고 싶었기 때문에 각자 영역에 다른 이벤트를 만들었지만 여전히 toggle 이벤트가 발생하였습니다.

그 이유는 이미 해당 태그 내에는 기본동작으로 toggle이 숨겨져있었기 때문입니다.

 

해결방법

click.prevent를 이용하여 details의 태그의 기본 동작을 실행하지 않게 하여 A클릭 시에도, toggle기능이 활성화되지 않게 하였습니다. click.prevent는 Event.preventDefault()인데, 이 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 기본 동작을 실행하지 않도록 지정하는 용도로 사용하기 때문에 A 클릭 시 기본 동작이 실행되지 않습니다.

<template>
	<details @toggle="onClickToggle">
		<summary>
			<div class="A" @click.prevent @click.stop="isMark = !isMark">
				...
			</div>
			<div class="B">
				...
			</div>
		</summary>
		<div class="content">
			...
		</div>
	</details>
</template>