vue 中 event.stopPropagation() 和event.preventDefault() 使用

最新推荐文章于 2023-05-30 12:09:49 发布
最新推荐文章于 2023-05-30 12:09:49 发布
阅读量4.8k 收藏 3
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42928918/article/details/89200926
版权

vue 中 event.stopPropagation() 和event.preventDefault() 使用

 

1.event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

 

2.event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

 

3.return false ；

这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

 

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <a href="//caibaojian.com/w3school/" @click="btn($event)">W3School</a>
            <p>preventDefault() 方法将防止上面的链接打开 URL。</p>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            methods: {
                btn(event) {
                    //event.preventDefault()
                    event.stopPropagation();  //如果是连接还是会打开
                    console.log(event.type);
                }
            }
        })
    </script>
</html>

 

 
 
 
 
 
 
 
posted @ 2019-04-10 15:39 梓鸿 阅读(...) 评论(...) 编辑 收藏
梓鸿
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中fragment.js使用方法小结
10-15
主要给大家汇总介绍了Vue中fragment.js使用方法的相关资料,需要的朋友可以参考下
vue.js和vue.min.js
06-13
vue.js和vue.min.js
vue 阻止事件冒泡常用的方法
热门推荐
花生日记
05-30 1万+
在这个例子中，我们在 `@click` 事件上添加了 `.stop` 修饰符，这样就可以阻止事件冒泡，只触发 `childClick` 方法。在这个例子中，当点击按钮时，只会触发 `childClick` 方法，而不会触发 `parentClick` 方法。在事件处理函数中，可以通过调用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。2. event.stopPropagation()：在方法中使用，阻止事件冒泡。1. @click.stop：在模板中使用，阻止点击事件冒泡。
vue 指令
断肠人在刷牙〃的博客
08-16 157
指令 解释：指令 (Directives) 是带有 v- 前缀的特殊属性 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 常用指令 v-text v-html v-bind v-text 解释：更新元素的 textContent v-html 解释：更新元素的 innerHTML v-bind 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 语法：v-bind:title=“msg” 简写：:title=“msg” v-on 作用：绑定事件
vue基础
weixin_44990056的博客
02-07 522
vue中获取dom，及操作dom 在watch或者created里面操作dom,用this.$nextTick(function(){ xxxx }) vue获取后端数据应该在created还是mounted 看情况了，一般放到created里面就可以了，这样可以及早发请求获取数据，如果有依赖d...
vue event.preventDefault()
白豆的微博
03-09 1万+
1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向document上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；3.return false ；这个方法比较暴力，
Vue事件修饰符
xiaowude_boke的博客
03-09 433
如果没有 self 修饰符，点击按钮时，事件会向上传播，导致 div 上的事件也会被触发。而现在点击按钮不会触发 div 上的事件，只有点击内容才能执行 div 上的事件。阻止事件冒泡：当一个元素执行某个事件的时候，这个事件会一直向上传播，如果它的父元素也有相同的事件，也会被触发执行。如果不想让事件向上传播，就需要阻止事件冒泡了。配合 keyup 使用时，需要在按下修饰键的同时，再按下其它键，随后释放其它键，事件才能被触发。：如果没有 capture 修饰符，事件默认冒泡阶段触发，会先执行内，后执行外。
vue中阻止冒泡 阻止默认行为
agua001的博客
04-28 7328
1、事件冒泡：不再派发事件。 方法: event.stopPropagation() html: <button data-aid='123' @click="eventFn($event)">事件对象</button> js: eventFn(e) { e.stopPropagation() }, 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 说明： 该方法将停止事件的传播，阻止它被
Vue知识点：事件修饰符
summer_cloudy的博客
02-21 330
Vue知识点：事件修饰符 - prevent 阻止默认事件 类似于e.preventDefault()； - stop 阻止事件冒泡 类似于e.stopPropagation(); - once 事件只触发一次 - capture 使用事件的捕获模式 <div class="box1" @click.capture="showMsg(1)"> box1 <div class="box2" @click="showMsg(2)">box2</div> &
vue中的事件修饰符，以v-on的prevent阻止默认事件修饰符为例
weixin_45586870的博客
02-07 2009
一、简介 事件修饰符处理了许多DOM事件的细节，帮助我们快速的完成一些事件动作。 例如v-on的修饰符有以下： .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 .native - 监听组件根
vue - vue.config.js中devServer配置方式
10-16
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue使用recorder.js实现录音功能
10-15
主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.global.js，Vue.js 框架的核心文件之一
最新发布
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之...4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。 5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。 6. 全局插件：使用 `Vue.use` 可以注册
关于e.preventDefault()方法
weixin_43821171的博客
09-22 7676
背景： 同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。 问题： 为什么我在父组件上使用pr
Vue中事件修饰符使用总结
欢迎大家交流前端开发技术、经验及各种知识沉淀
08-25 368
`在javaScript事件处理程序中经常调用event.preventDefault()和event.stopPropagation()等方法，在vue中对应着v-on的事件修饰符
8.Vue事件修饰符
西瓜咬人啦
10-20 111
1. 方法 @click…stop 调用event.stopPropagation()： event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。 @click.prevent 调用event.preventDefault() 方法阻止元素发生默认的行为 1. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
vue中修饰符prevent相当于调用event.preventDefault()：
杨咩咩
02-16 4000
$("a").click(function(event){ event.preventDefault(); }); <form v-on:submit.prevent="onSubmit"></form> vue中prevent修饰符相当于调用event.preventDefault()： event.preventDefault() 方法阻止元素发生默认...
Vue常见的事件修饰符
见证自己学习,成长的记录
03-08 2240
vue一共给我们准备了6个事件修饰符，前三个比较常用，后三个少见，这里着重讲下前三个1.prevent:阻止默认事件(常用)2. stop:阻止事件冒泡(常用)3. once:事件只触发一次(常用)4.captrue:使用事件的捕捉模式(不常用)5.self:只有event.target是当前操作的元素时才触发事件(不常用)6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)个人感觉，了解常见的这些时间修饰符就够用了，不常见的了解即可。用到的时候再搜索相关资料。
Vue v-if以及 v-else 的使用
梓鸿
04-10 1万+
Vue v-if以及 v-else 的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script sr...
event.preventDefault()修饰符
05-30
在 Vue 中，可以使用 `.prevent` 修饰符来阻止事件的默认行为，相当于调用 `event.preventDefault()` 方法，例如： ```html <template> <div> <form @submit.prevent> <input type="text" v-model="message"> </form> </div> </template> ``` 在上面的代码中，我们使用 `@submit.prevent` 指令来阻止表单的默认提交行为，相当于调用了 `event.preventDefault()` 方法。这样可以确保在表单提交时，不会触发默认的提交行为。 除了 `.prevent` 修饰符之外，Vue 还提供了其他一些常用的事件修饰符，例如： - `.stop`：阻止事件继续传播，相当于调用 `event.stopPropagation()` 方法。 - `.capture`：添加事件监听器时使用事件捕获模式，即先捕获事件再冒泡。 - `.self`：只当事件在该元素本身（而不是子元素）触发时触发回调。 - `.once`：只触发一次回调函数。 - `.passive`：告诉浏览器该事件监听器不会调用 `event.preventDefault()` 方法，可以优化性能。 这些事件修饰符可以组合使用，例如： ```html <template> <div> <button @click.stop.prevent="submitForm">提交</button> </div> </template> ``` 在上面的代码中，我们使用了 `.stop` 和 `.prevent` 修饰符来阻止事件继续传播并阻止默认的表单提交行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值