vue.js中修饰符.stop的用法解析

目录
  • 修饰符.stop的用法
    • 用法如下
    • 下面是全部的代码
  • stop事件修饰符
    • stop事件修饰符具体介绍

修饰符.stop的用法

.stop修饰符是用来阻止冒泡事件的发生的。

用法如下

<a v-on:click.stop="doThis"></a>

下面是全部的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<style>
    #gpa {
        margin: 0 auto;
        width: 100px;
        height: 60px;
        background: green;
    }
    #pa {
        width: 60px;
        height: 40px;
        background: pink;
        margin: 0 auto;
        text-align: center
    }
</style>
<body>
//--------------------------------重点是这一部分代码。
<div id="gpa" v-on:click="dodo">
    <div id="pa" v-on:click="doThat">
        <a  v-on:click.stop="doThis" href="http://www.baidu.com" rel="external nofollow" >百度</a>
    //点击百度的时候不发生冒泡，执行doThis函数，然后跳转到百度首页。
    </div>
    //点击粉色部分，即pa部分，发生冒泡，执行doThat，dodo函数。
</div>
</body>
<script>
    var gpas = new Vue({
        el:'#gpa',
        data:{
        },
        methods:{
            doThis:function(){
                alert("doThis");
            },
            doThat:function (){
                alert("doThat")
            },dodo:function(){
                alert("dodo")
            }
        }
    })
    </script>
</html>

stop事件修饰符

修饰符 说明
.stop 阻止冒泡

stop事件修饰符具体介绍

.stop

.stop用来防止冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
            .inner {
              height: 150px;
              background-color: gold;
            }

            .outer {
              padding: 40px;
              background-color: red;
            }
          </style>
</head>
<body>

    <div id="app">
            <div class="inner" @click="div1Handler">
                    <input type="button" value="点击" @click="btnHandler">
            </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data: {
            },
            methods: {
                div1Handler() {
                    console.log('这是触发了 inner div 的点击事件')
                },
                btnHandler() {
                    console.log('这是触发了 btn 按钮 的点击事件')
                }
            }
        })
    </script>
</body>
</html>

页面操作效果

我们看到不光点击按钮的点击事件触发了，而且父容器div的点击事件也触发了，这时我们就可以使用.stop来阻止这个冒泡了，如下

在访问测试

通过输出可以看到点击事件没有往上冒泡了！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js 事件修饰符的使用教程

     一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作. 仓储地址: https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives  二.干货合集

  • Vue.js学习笔记之修饰符详解

    Vue.js学习笔记之修饰符详解

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点"."连接修饰符名称. 一.v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令.在 <input> 和 <textarea> 上,默认通过监听元素的 input 事件来更新绑定的属性值. 为了能明显的看到绑定属性值的变化,需要在Chrome浏览器中安

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • vue事件修饰符和按键修饰符用法总结

    之前关于vue事件修饰符和按键修饰符的一点分析,最近需要回顾,就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符.通过由点(.)表示的指令后缀来调用修饰符. .prevent .capture

  • vue.js中修饰符.stop的用法解析

    vue.js中修饰符.stop的用法解析

    目录 修饰符.stop的用法 用法如下 下面是全部的代码 stop事件修饰符 stop事件修饰符具体介绍 修饰符.stop的用法 .stop修饰符是用来阻止冒泡事件的发生的. 用法如下 <a v-on:click.stop="doThis"></a> 下面是全部的代码 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF

  • JS正则表达式修饰符global(/g)用法分析

    本文实例讲述了JS正则表达式修饰符global(/g)用法.分享给大家供大家参考,具体如下: /g修饰符代表全局匹配,查找所有匹配而非在找到第一个匹配后停止.先看一段经典代码: var str = "123#abc"; var noglobal = /abc/i;//非全局匹配模式 console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • 详解Vue.js中.native修饰符

    修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

  • JS正则表达式修饰符中multiline(/m)用法分析

    本文实例分析了JS正则表达式修饰符中multiline(/m)用法.分享给大家供大家参考,具体如下: JavaScript正则表达式有3种修饰符/i./m和/g./i是我们最常用,也是最好理解的,代表正则表达式匹配的时候不区分大小写. var regex = /abc/i; alert(regex.test("aBc"));//true /m代表多行模式multiline,如果目标字符串中不含有换行符\n,即只有一行,那么/m修饰符没有任何意义. var multiline = /ab

  • Vue.js中 v-model 指令的修饰符详解

    Vue.js中 v-model 指令的修饰符详解

    1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外).我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据. html: <div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值&quo

  • Vue.js中关于“{{}}”的用法

    目录 关于“{{}}”的用法 Vue表达式{{}}中拼接字符 关于“{{}}”的用法 Vue.js核心库只关注视图层,而我们只需要注重数据的操作就好,通过接下来的学习会更深的理解这句话,vue.js通过很多指令和修饰符来完成对视图的关注,第一个是{{}} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="

  • 浅谈Vue.js中ref ($refs)用法举例总结

    本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下: 看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅. 一.ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </co

随机推荐