<!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>

效果:

27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解的更多相关文章

  1. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  2. Vue – 基础学习(4):事件修饰符

    Vue – 基础学习(3):事件修饰符

  3. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  4. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  5. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  6. 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue指令之事件修饰符

    事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...

  8. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  9. （二）咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

随机推荐

  1. Java的Map和Object之间的相互转换方法

    public staic Map<String, Object> objectToMap(Object obj) throws Exception { if(obj == null) re ...

  2. iOS开发ReactiveCocoa学习笔记(四)

    ReactiveCocoa常见操作方法介绍: demo地址:https://github.com/SummerHH/ReactiveCocoa.git 1.1 ReactiveCocoa操作须知 所有 ...

  3. Spring cloud Eureka 服务治理(注册服务提供者)

    搭建完成服务注册中心,下一步可以创建服务提供者并向注册中心注册服务. 接下来我们创建Spring Boot 应用将其加入Eureka服务治理体系中去. 直接使用签名章节创建hello服务项目改造: 1 ...

  4. 《Head First 设计模式》之单件模式

    单件模式(Singleton) ——确保一个类只有一个实例,并提供全局访问点. 有一些对象其实我们只需要一个,比如线程池.缓存.对话框.处理偏好设置和注册表的对象.日志对象.如果制造出多个实例,就会导 ...

  5. <Android 基础（四）> RecyclerView

    介绍 RecyclerView是ListView的豪华增强版.它主要包含以下几处新的特性,如ViewHolder,ItemDecorator,LayoutManager,SmothScroller以及 ...

  6. Python开发环境Wing IDE如何调试进程异常报告

    Wing IDE的调试器所报告的任何异常,都会在调试器以外的任何代码运行事件中展示出来. 通过使用Debug工具或者是Debug菜单中的Start / Continue继续调试过程的异常检测. Win ...

  7. 基于python3.6的如何爬取百度地图

    先前参考了其他的代码,大多数是python2.7写的,而3.6用的类库以及规则有了很大的变动,所以自己写了一个这样的代码,供给大家参考. def get_station(i): station=[] ...

  8. 【C++函数重载】求3个数中最大的数(分别考虑整数、双精度数、长整数的情况)。

    #include using namespace std; int main( ) { int max(int a,int b,int c); //函数声明 double max(double a,d ...

  9. jQuery-添加新元素的方法（append()、prepend()、before()、after()）

    1.以 HTML 创建新元素 var txt1="<p>Text.</p>"; 2.以 jQuery 创建新元素 var txt2=$("< ...

  10. hiho一下 第三十八周 二分答案

    题目链接:http://hihocoder.com/contest/hiho38/problem/1 ,挺难想的解题思路,好题. 按照提示的算法来: 我们需要找什么? 在这个题目中我们需要找的是路径最 ...