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>

vue 中 event.stopPropagation() 和event.preventDefault() 使用的更多相关文章

  1. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  2. event.stopPropagation()和event.preventDefault()

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

  3. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  4. event.stopPropagation()，event.preventDefault()和return false的区别

    event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...

  5. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

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

  6. event.stopPropagation()和event.preventDefault()，return false的区别

    我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...

  7. Vue event.stopPropagation()和event.preventDefault()的使用

    定义和用法 1. event.stopPropagation()方法 阻止事件冒泡到父元素,阻止任何父事件处理程序被执行,但是它的默认事件仍然会执行.当调用这个方法的时候,如果点击了一个链接(a标签) ...

  8. event.stopPropagation()、event.preventDefault()与return false的区别

    做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...

  9. event.stopPropagation()与event.preventDefault()

    <div id='div0'> <div id='div1'> <a href="#" id='div2'>2222</a> < ...

随机推荐

  1. java向word中插入Excel附件

    1.word中插入对象的原理 编辑word,向word中插入图片.EXCEL.WORD等附件,再将word保存为xml格式,通过XML查看工具打开xml格式的word的源码,通过对比源码, 可以发现平 ...

  2. JavaSE--基础知识

    Java基础知识 一.基础知识 1.java命名规则 由26个英文字母大小写,0-9 ,_或 $ 组成 数字不可以开头. 不可以使用关键字和保留字,但能包含关键字和保留字. Java中严格区分大小写, ...

  3. 什么是 MicroPython ？它有什么优势？

    MicroPython 和 Python 都是一类 Python 的动态语言解释器. 若是在系统里安装了 Python 解释器,例如在 Windows 或者 Linux 命令行输入 python,进入 ...

  4. luogu P4631 [APIO2018] Circle selection 选圆圈

    传送门 那个当前半径最大的圆可以用堆维护.这道题一个想法就是优化找和当前圆有交的圆的过程.考虑对于所有圆心建KD-tree,然后在树上遍历的找这样的点.只要某个点子树内的点构成的矩形区域到当前圆心的最 ...

  5. react-native底部导航栏实现

    react-native-tab-navigator实现: bottom.js代码如下: import React, {Component} from 'react'; import {StyleSh ...

  6. css3之新增伪类

    css3新增了许多伪类,但是IE8以及更低版本的IE浏览器不支持css3伪类,所以在使用时要是涉及到布局等意象全局的样式,应该多考虑一下. 1.elem:nth-child(n) 这个伪类选中父元素下 ...

  7. git 本地tag和远程tag对应不上 vscode里pull不下代码

    vscode拉取代码是用  git pull --tags origin saas-xxx > git pull --tags origin saas-base From 172.16.0.xx ...

  8. SpringBoot集合Linux的FastDFS与Nginx上传图片测试错误com.github.tobato.fastdfs.exception.FdfsConnectException: 无法获取服务端连接资源:can't create connection to/192.168.1.104:22122

    报错 com.github.tobato.fastdfs.exception.FdfsConnectException: 无法获取服务端连接资源:can't create connection to/ ...

  9. 【c#】ADO操作Access的mdb数据库只能读不能修改的解决方法

    在使用ACCESS数据库时连接字符串如 string strcon=@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=F:\Access操作\简易 ...

  10. mysql主从库配置读写分离以及备份

    1,什么是读写分离?其实就是将数据库分为了主从库,一个主库用于写数据,多个从库完成读数据的操作,主从库之间通过某种机制进行数据的同步,是一种常见的数据库架构.一个组从同步集群,通常被称为是一个“分组” ...