<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止冒泡</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div class="main" @click="a">
    <span @click.stop="b">我是Span <i @click.stop="c">我是i</i></span>
</div>
<script>
    var example1 = new Vue({
        el:".main",
        data: {
            counter: 0
        },
        methods:{
            a(){
                alert('我是div');
            },
            b(){
                alert('我是span');
            },
            c(){
                alert('我是i');
            }
        }
    })
</script>
</body>
</html>

Vue阻止冒泡的更多相关文章

  1. vue 阻止冒泡 @click.stop=

    vue 阻止冒泡 @click.stop= vue中处理冒泡标准姿势 事件修饰符 Vue.js 为 v-on 提供了事件修饰符,修饰符是由点开头的指令后缀来表示的.这些事件修饰符主要有以下几个: st ...

  2. vue 阻止冒泡弹窗小案例( 知识点：@click.stop=''")

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

  3. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

  4. vue 点击事件阻止冒泡 用stop

    1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'

  5. vue阻止事件冒泡和默认事件

    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...

  6. vue之冒泡阻止

    用了Element ui写页面 <el-dropdown-menu slot="dropdown"> <el-dropdown-item> <el-s ...

  7. Js阻止冒泡，Vue中如何阻止冒泡事件

    js解决冒泡:event.stopPropagation() vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop="& ...

  8. 一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透

    可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变 篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime ...

  9. JS点击子元素不触发父元素点击事件(js阻止冒泡)

    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...

随机推荐

  1. Netty自娱自乐之类Dubbo RPC 框架设计构想 【上篇】

    之前在前一篇的<Netty自娱自乐之协议栈设计>,菜鸟我已经自娱自乐了设计协议栈,gitHub地址为https://github.com/vOoT/ncustomer-protocal.先 ...

  2. poj 1014多重背包

    题意:给出价值为1,2,3,4,5,6的6种物品数量,问是否能将物品分成两份,使两份的总价值相等. 思路:求出总价值除二,做多重背包,需要二进制优化. 代码: #include<iostream ...

  3. yum的初步了解与使用

    什么是yum Yum(Yellow dog Updater,Modified)是一个基于RPM包管理的字符前端软件包管理器.能够从指定的服务器自动下载RPM包并且安装,可解决软件包相关依赖性,并且一次 ...

  4. 防止fixed元素遮挡其他元素的方法

    有多个页面,有的有固定的头部(设置了postion:fixed的元素),有的没有固定的头部,这时就有个问题,有固定头部的页面,头部会遮挡下面的内容,那怎么解决呢? <!DOCTYPE html& ...

  5. JAVA基础第四组（5道题）

    16.[程序16]                   题目:输出9*9口诀.                  1.程序分析:分行与列考虑,共9行9列,i控制行,j控制列. package com. ...

  6. java中覆盖必须满足的约束

    子类方法的名称,参数何返回类型必须与父类一致. 子类方法不能缩小父类方法的访问权限 子类方法不能抛出比父类方法更多的异常 方法覆盖只存在于子类和父类,同一个类中方法只能被重载 父类的静态方法不能被子类 ...

  7. 英语学习app案列分析

    很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课?都不对,软件工程有理论,有实践,更重要的是分析,思辨,总结.在课程 ...

  8. Java学习2——HelloWorld（编写第一个java程序）

    编写 在自己的工作文件目录下(如上一篇中配置的classpath路径)创建HelloWorld.java文件,编写如下代码,并保存 public class HelloWorld { public s ...

  9. Java swing: 实现ActionListener监听器的三种途径

    Swing是目前Java中不可缺少的窗口工具组,是用户建立图形化用户界面(GUI)程序的 强大工具.Java Swing组件自动产生各种事件来响应用户行为.如当用户点击按钮或选择菜单项目时,Swing ...

  10. Java:@Override标签的多态性详解

    Override(重写)是子类与父类的一种多态性体现. Override允许子类改变父类的一些行为. 为什么需要Override:当父类不满足子类的一些要求时我们就需要子类对父类的一些行为进行重写.  ...