- <!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>
效果:
来源: http://www.bubuko.com/infodetail-2912568.html