<!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. Maven的学习资料收集--（九） 构建SSH项目以及专栏maven

    在这里整合一下,使用Maven构建一个SSH项目 1.新建一个Web项目 可以参照前面的博客 2.添加依赖,修改pom.xml <project xmlns="http://maven ...

  2. Chapter 18 MySQL NDB Cluster 7.3 and NDB Cluster 7.4渣翻

    Table of Contents 18.1 NDB Cluster Overview      18.2 NDB Cluster Installation      18.3 Configurati ...

  3. 使用 ViS2005 进行单元测试

    1. 新建一个空白解决方案,命名为"单元测试- 01"吧. 2.在该解决方案下创建一个类库,作为此次单元测试的测试对象:我们就创建一个数学类(用于实现运算的简单类).命名为&quo ...

  4. 《Head First 设计模式》之迭代器与组合模式——遍历合并的菜单

    迭代器与组合模式(Iterator & Composite) 迭代器:提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 组合:允许你将对象组成树形结构来表现“整体.部分” ...

  5. Web框架的应用

    从今天开始,我们将要学习有关Web框架的一些内容,在学习之前先来学习一下http协议,即基于http是如何通信的. http 概要:http是基于tcp/ip通信协议来传输数据的. 优点: 1.简单快 ...

  6. Android compress 压缩 会不会失真

    微信的缩略图要求是不大于32k,这就需要对我的图片进行压缩.试了几种方法,一一道来. 代码如下 ByteArrayOutputStream baos = new ByteArrayOutputStre ...

  7. 【extjs6学习笔记】0.4 准备： 书籍与文档

    Ext JS 6 By Example Ext JS Essentials Learning Ext JS - Fourth Edition Ext JS 6: Getting Started htt ...

  8. sqlserver锁表、解锁、查看销表

    锁定数据库的一个表 代码如下 复制代码 SELECT * FROM table WITH (HOLDLOCK) 注意: 锁定数据库的一个表的区别 代码如下 复制代码 SELECT * FROM tab ...

  9. LeetCode OJ Container With Most Water 容器的最大装水量

    题意:在坐标轴的x轴上的0,1,2,3,4....n处有n+1块木板,长度不一,任两块加上x轴即可构成一个容器,其装水面积为两板的间距与较短板长之积,以vector容器给出一系列值,分别代表在0,1, ...

  10. 如何在SAP云平台上使用MongoDB服务

    首先按照我这篇文章在SAP云平台上给您的账号分配MongboDB服务:如何在SAP云平台的Cloud Foundry环境下添加新的Service 然后从这个链接下载SAP提供的例子程序. 1. 使用命 ...