<div id="readability-page-1" class="page"><article id="post-front/2023/07/19/vuestop" role="article"><header><p> <time datetime="2023-07-19T00:00:00+00:00">19 Jul 2023</time> in <a href="/category/01-frontend/" data-flip="title">FrontEnd</a></p></header><div>  <p>이벤트버블링이 발생해서 자식 컴포넌트에서만 실행되어야 하는 이벤트가 계속 해서 부모 함수까지 실행되게 만들었다.</p><p>굉장히 짜증났음.</p><p>창을 닫아야 하는데 부모div의 창을 여는 함수가 계속 이벤트 버블링으로 일어나니까</p><p>아무리 false로 만들어도 계속해서 true로 바뀜.</p><p>vue에서는 <code>.stop</code> 수식어로 방지해줄 수 있다</p><div><pre><code><span>&lt;</span><span>template</span><span>&gt;</span>
  <span>&lt;div&gt;</span>
    <span>&lt;button</span> <span>@</span><span>click.stop=</span><span>"childFunction"</span><span>&gt;</span>자식 버튼<span>&lt;/button&gt;</span>
  <span>&lt;/div&gt;</span>
<span>&lt;/</span><span>template</span><span>&gt;</span>
</code></pre></div><p>이런식으로 온클릭이벤트에 stop을 붙여주면 이벤트 버블링이 방지가 된다.</p><div><p>참고 : https://ko.javascript.info/bubbling-and-capturing </p>  </div></div></article></div>

Sora

이벤트버블링이 발생해서 자식 컴포넌트에서만 실행되어야 하는 이벤트가 계속 해서 부모 함수까지 실행되게 만들었다.
굉장히 짜증났음.
창을 닫아야 하는데 부모div의 창을 여는 함수가 계속 이벤트 버블링으로 일어나니까
아무리 false로 만들어도 계속해서 true로 바뀜.
vue에서는 .stop 수식어로 방지해줄 수 있다
<template>
  <div>
    <button @click.stop="childFunction">자식 버튼</button>
  </div>
</template>
이런식으로 온클릭이벤트에 stop을 붙여주면 이벤트 버블링이 방지가 된다.
참고 :  https://ko.javascript.info/bubbling-and-capturing

[Vue.js] 이벤트 버블링 막기

댓글