解决VUE框架 导致绑定事件的阻止冒泡失效问题

前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。

而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。

此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop='xx()'

.stop

.prevent

.capture

.self

.once

<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

以上这篇解决VUE框架 导致绑定事件的阻止冒泡失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue绑定的点击事件阻止冒泡的实例
  • 详解vue事件对象、冒泡、阻止默认行为
赞 (0)

相关推荐

  • vue绑定的点击事件阻止冒泡的实例

    当我们在使用vue做项目时,经常用到点击事件的绑定,但是我们绑在一个div上,里面的其他按钮(如删除.修改)等按钮也会加载这儿div的点击事件,而事实我们不需要,如何解决: 首先我们来区分事件冒泡.事件捕获是什么 (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> doc

  • 详解vue事件对象、冒泡、阻止默认行为

    整理文档,搜刮出一个vue事件对象.冒泡.阻止默认行为的代码,稍微整理精简一下做下分享. 事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <s

  • 解决VUE框架 导致绑定事件的阻止冒泡失效问题

    前面遇到了一个问题就是VUE框架内部做了一些处理,使得在我们通过v-for渲染DOM的时候添加新元素的时候,绑定事件也能对新增的元素有效. 而这次遇到的问题则是,原本绑定事件中(该函数没有写在vue实例的methods中),导致阻止冒泡事件失效了.无论是return false 还是event.stopPropagation();都无效. 此时需要通过用VUE提供了事件修饰符来处理,比如阻止事件冒泡@click.stop='xx()' .stop .prevent .capture .self

  • 解决vue+element 键盘回车事件导致页面刷新的问题

    背景 今天发现输入框输入内容后回车就会刷新页面 解决 <el-form :inline="true" @submit.native.prevent> </el-form> el-from 加上 @submit.native.prevent 具体是参考element-ui文档解决的 W3C 标准中有如下规定: When there is only one single-line text input field in a form, the user agent

  • 解决vue组件中click事件失效的问题

    最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动.在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click.v-bind:click.@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过之后click事件成功. 后来在使用vuex的时候一直报"[vuex] unknown mutation type: changeCity&

  • Vue 框架之键盘事件、健值修饰符、双向数据绑定

    一.键盘事件,当按键盘时,在控制台输出提示 html 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi</title> <!--引入自定义的样式--> <link rel="stylesheet" href="css/style.css&quo

  • 浅谈vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)

  • JavaScript捕捉事件和阻止冒泡事件实例分析

    本文实例讲述了JavaScript捕捉事件和阻止冒泡事件.分享给大家供大家参考,具体如下: 今日,项目程序出现异常,后发现跟冒泡事件有关,利用此机会探索一下利用Javascript捕获和冒泡事件. 一.要探究捕获和冒泡事件,首先要知道什么是事件的捕获和冒泡,所以呢,先从概念入手: 事件的冒泡:在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传

  • vue中@click绑定事件点击不生效的解决

    目录 @click绑定事件点击不生效 原因 解决方法 @click中不能使用三则表达式原因 @click绑定事件点击不生效 原因 根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件.但父组件想在子组件上监听自己的click的话,需要加上native修饰符. 解决方法 方法1:在@click后加上.native(监听根元素的原生事件,使用 .native 修饰符) @click.native = "..." 方法2:向外发送clic

  • js利用事件的阻止冒泡实现点击空白模态框的隐藏

    很多时候,我们做前端的时候都会有这样的小功能,点击弹出某个框框,但是,有时候不想操作,就想点击某个空白处,隐藏该框框.假设如下场景,一个小按钮,点击可以弹出一个模态框. 就这么简单,但是我们想要点击空白部分的时候隐藏模态框,加入按钮id:btn,模态框id:model 也许我们最简单的思路就是直接在document上监听一个事件,伪代码如下: 按钮点击弹出事件监听: 复制代码 代码如下: $("#btn").bind("click",function(e){ if(

  • js冒泡、捕获事件及阻止冒泡方法详细总结

    javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结. 事件冒泡是一个从子节点向祖先节点冒泡的过程: 事件捕获刚好相反,是从祖先节点到子节点的过程. 给一个jquery点击事件的例子: 代码如下: 复制代码 代码如下: <!DOCTYPE html> <meta charset="utf-8"> <title>test</title> <head> <scrip

  • jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理

    jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理

    发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ) { e.stopPropagation(); } jQuery重载stopPropagation函数调用的本地事件对象的stopPropagation函数阻止冒泡.也就是说,阻止冒泡的是当前节点,而不是事件源. 说到触发事件,我们第一反应是使用$(...).click()这种方式触发click事

随机推荐