27.28. VUE學習之--事件修飾符之stop&capture&self&once例項詳解
阿新 • • 發佈：2019-01-08
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="hdcms"> <!--預設是從裡向外冒泡響應事件,從子級->父級元素響應事件,--> <div @click="box" :style="{border:'solid 2px red'}"> <!--prevent是阻止點選a連線跳轉,stop是阻止從裡向外冒泡響應事件,父級的事件不執行--> <a href="https://www.cnblogs.com/haima" @click.prevent="links">從裡向外冒泡響應事件</a> </div> <br> <!--capture捕獲事件,從父級->子級元素響應事件,--> <div @click="box" :style="{border:'solid 2px red'}"> <!--prevent是阻止點選a連線跳轉,stop是阻止從裡向外冒泡響應事件,父級的事件不執行--> <a href="https://www.cnblogs.com/haima" @click.stop.prevent="links">阻止從裡向外冒泡響應事件,阻止點選a連線跳轉</a> </div> <br> <!--self點到自己才觸發事件,點誰誰響應事件--> <div @click.self="box" :style="{border:'solid 2px red'}"> <!--prevent是阻止點選a連線跳轉,由於父級加了self,所以就不會向上冒泡響應事件,效果同上面的stop--> <a href="https://www.cnblogs.com/haima" @click.prevent="links">父級加self,阻止a標籤冒泡響應事件,點誰誰響應事件</a> </div> <br> <!--capture捕獲事件,從父級->子級元素響應事件,--> <div @click.capture="box" :style="{border:'solid 2px red'}"> <!--prevent是阻止點選a連線跳轉--> <a href="https://www.cnblogs.com/haima" @click.prevent="links">從父級->子級元素響應事件</a> </div> <br> <!--once是隻繫結一次跳轉--> <div @click="box" :style="{border:'solid 2px red'}"> <!--prevent是阻止點選a連線跳轉--> <a href="https://www.cnblogs.com/haima" @click.once.stop.prevent="links">從父級->子級元素響應事件</a> </div> </div> <script> var app = new Vue({ el: '#hdcms', data: {}, methods: { box(){ alert('div'); }, links(){ alert('www.cnblogs.com/haima'); } } }); </script> </body> </html>
效果:
