vue click.stop阻止点击事件继续传播的方法

如下所示：

<div id="app">
  <div v-on:click="dodo">
   <button v-on:click="doThis">阻止单击事件继续传播</button>
  </div>
 </div>

 <script>
  var app = new Vue({
   el: "#app",
   data: {
    name: "Vue.js"
   },
   methods: {
    doThis: function () {
     alert("noclick");
    },
    dodo: function () {
     alert("dodo");
    }
   }
  });
 </script>

将会先弹出“noclick”,再弹出“dodo”。

 <div id="app">
  <div v-on:click="dodo">
   <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
  </div>
 </div>

 <script>
  var app = new Vue({
   el: "#app",
   data: {
    name: "Vue.js"
   },
   methods: {
    doThis: function () {
     alert("noclick");
    },
    dodo: function () {
     alert("dodo");
    }
   }
  });
 </script>

只弹出“noclick”

以上这篇vue click.stop阻止点击事件继续传播的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue中实现点击选择框阻止弹出层消失的方法

    在vue项目中,选择性别是用的一个弹出层, <div class="sex" v-show="showed" transition='fade' @click="unshow"> <ul @click.stop="stophidden"> <li class="choice">选择</li> <li> <label>男</labe

  • 详解用vue编写弹出框组件

    前言 最近研究了用vue编写弹出框的组件,发现其实这里面的门道还是有很多的.这篇文完全是用来记录总结下最近的学习成果,同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架,因此适合有一定vue2.0基础的同学阅读. 设计组件的思考 其实单纯的编写一个弹出框组件并不难,写一个模板,然后用v-if或者v-show指令还控制组件的出现与消失.真正困扰我的是,这个组件的调用方式,这个问题纠结了我好久. 调研了下资料,有些人建议,直接把组件标签插进模板中,然后通过直接控制组件

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

  • vue多种弹框的弹出形式的示例代码

    vue多种弹框的弹出形式的示例代码

    1.父组件引入子组件,子组件的加载问题 products.vue引入dlAddProd弹框(dlAddProd.vue),由于<div v-show="visible">,所以在products页面加载时,dlAddProd会被加载.但是el-dialog中的body部分不会被加载(不管有没有加v-if指令):dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框,但此时只有dlBlankAdd会被加载,dlEditProd不会被加载(<d

  • vue click.stop阻止点击事件继续传播的方法

    如下所示: <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.j

  • vue中的@click.native 原生点击事件

    目录 @click.native原生点击事件 给vue组件绑定事件时候 等同于在自组件中 vue点击事件补充.native 步骤 官网的解释 @click.native原生点击事件 给vue组件绑定事件时候 必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 等同于在自组件中 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) vue点击事件补充.native 发现vue中加载Element 之后 键盘事件

  • vue数据操作之点击事件实现num加减功能示例

    vue数据操作之点击事件实现num加减功能示例

    本文实例讲述了vue数据操作之点击事件实现num加减功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue num加减</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></scrip

  • VUE解决 v-html不能触发点击事件的问题

    背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发. 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: <template> <div class="hello"> <h1> 我是父组件 </h1> <div class

  • Vue表单提交点击事件只允许点击一次的实例

    常用出现场景:商城点击订单提交 1.使用Vue封装事件 body: <template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div> </template> 方法: methods: { submitOrder() { // 处理逻辑 } } 2.使用原生JS事件 在数据data里面声明一个flag属性 data() {

  • vue 遮罩层阻止默认滚动事件操作

    在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 如果不是使用Vue的话,可以给body添加overflow:hidden属性解决 补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还可以滚动) vue项目中弹出层时,蒙版下还可以滚动页面. 移动端解决方案

  • vue实现动态列表点击各行换色的方法

    只是模拟一练习 v-for v-on v-bind的一个简单demo 代码思路: 遍历出data里面的数据 v-for 给li加点击事件 绑定class样式 怎么控制样式的显示 通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false 代码: <div id="app"> <ul> <li v-for='(item,index) in arr' v-bind:class='{

  • 在layui中layer弹出层点击事件无效的解决方法

    1.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事 件的 2.而(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件不起作用:(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元

  • Android编程出现Button点击事件无效的解决方法示例

    本文实例讲述了Android编程出现Button点击事件无效的解决方法.分享给大家供大家参考,具体如下: 遇到这样一个问题,给一个界面上方的按钮添加了点击事件,但死活没反应,而放在界面下方的3个按钮,都有相应点击事件,百度了一下无非有两种可能: 1.button没有初始化或者button初始化多次,导致混乱. 2.button点击事件写错,无法监听. 但我确定的是这些都是没有错的,后来找到的原因是下方的scroll布局覆盖了上方的button的布局,使用了fill_parent,所以获取不到点击

  • Android实现按钮点击事件的三种方法总结

    Android实现按钮点击事件的三种方法总结

    目录 一.匿名内部类实现 二.接口实现 三.布局实现 Button是程序用于和用户进行交互的一个重要控件,相信大家对这个控件已经非常熟悉了,我们平时用的最多的控件之一.既然有Button,那肯定有onClick方法,下面就教大家三种实现点击事件的方法,大家选择一种自己喜欢的方式写就可以了. 我们先在layout文件里面放置一个Button控件,很简单,让它水平和垂直都居中,Button里面的文字也居中对齐,字体大小15sp,内容为“我是按钮”,具体代码如下: <RelativeLayout xm

随机推荐