<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修饰符：self capture stop prevent的使用</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
    <!--第一种情况-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click="aEven">百度链接</a>-->
    <!--</div>-->
    <!--stop的使用：阻止事件冒泡的发生-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.stop="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--prevent的使用：阻止默认事件的发生-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.stop.prevent="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--self的使用：只有点击他本身时才去执行，点击他的子元素不去执行-->
    <!--<div @click.self="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.prevent="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件-->
    <div @click.capture="divEven" style="border:1px #188eee solid;">
        <a href="www.baidu.com" @click.prevent="aEven">百度链接</a>
    </div>
</div>
<script>
    new Vue({
        el:"#demo",
        methods:{
            divEven(){
                alert("我是div的事件");
            },
            aEven(){
                alert("我是a链接事件");
            }
        }
    });
</script>
</body>
</html>

VUE中事件修饰符：stop prevent self capture的更多相关文章

  1. 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单

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

  2. 027——VUE中事件修饰符：stop prevent self capture

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

  3. vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

    ==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...

  4. 028——VUE中事件修饰符once

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

  5. vue中的修饰符

    Vue2.0学习笔记:Vue事件修饰符的使用   事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...

  6. Vue的事件修饰符

    转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...

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

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

  8. vue中.sync修饰符，实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  9. vue中.sync 修饰符

    一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...

随机推荐

  1. MAC OSX下终端通过NTLM验证，通过代理上网(花了一天时间才解决这个)

    MAC OSX下终端通过NTLM验证,通过代理上网 公司网络限制如下: 公司通过代理来控制内网用户访问外网的权限.用户名和密码为域用户,采用的验证方式是NTLM(用的是foreFront TMG) 遇 ...

  2. learning java AWT 画图

    import javax.swing.*; import java.awt.*; import java.util.Random; public class SimpleDraw { private ...

  3. shell命令的原理

    https://blog.csdn.net/m0_37925202/article/details/80258974 https://blog.csdn.net/a15929748502/articl ...

  4. 内核中PID_HANDLE_OBJECT等互相转换

    目录 一丶简介 1.进程pid 转化为 HANDLE 2.Handle --------> 转化为 PID 3.Pid ------> Object(EPROCESS) 4. HANDLE ...

  5. 页面截取字段和转码，页面截取字段时候需要进入JS

    截取字段    ${fn:substring(info.cpflmc,0,20)}${fn:length(info.cpflmc)>40?'...':''}             表头list ...

  6. 作业要求2018092609-2 选题 Scrum立会报告+燃尽图 05

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8678 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...

  7. Vue axios post 传参数，后台接收不到为 null

    由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理. cnmp inst ...

  8. rockchip 硬解码相关

    http://opensource.rock-chips.com/wiki_Mpp MPP You can get mpp source from git. git clone -b release ...

  9. 文献阅读 | Molecular Architecture of the Mouse Nervous System

    文章亮点: 按level来管理和分析数据,文章有不同stage,每个stage有不同subtype,这应该是一个真tree,而不只是一个进化树,文章里出现最多的进化树把所有的stage都整合了. 空间 ...

  10. OGC定义的几何要素

    OGC定义了两种描述几何对象的格式,分别是WKB(Well-Known Binary)和WKT(Well-Known Text). 在SQL语句中,用以下的方式可以使用WKT格式定义几何对象:几何类型 ...