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. [luogu 3175] [HAOI2015]按位或(min-max容斥+高维前缀和)

    [luogu 3175] [HAOI2015]按位或 题面 刚开始你有一个数字0,每一秒钟你会随机选择一个[0,2^n-1]的数字,与你手上的数字进行按位或运算.问期望多少秒后,你手上的数字变成2^n ...

  2. C#实现Web链接启动应用程序

    C#实现Web链接启动应用程序 最近需要配合Web端实现用户点击链接来启动应用程序并且需要能够传参数给应用程序. 那么就可以使用注册表来实现这个功能 编写注册表可以在软件安装程序中加入,也可以在软件启 ...

  3. java实现spark常用算子之coalesce

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  4. PDF转图片，在线PDF转JPG/PNG

    [在线DEMO](https://oktools.net/pdf2img) 原理 使用pdf.js预览图片,pdf.js将pdf通过canvas将每一页渲染出来,然后我们通过canvas的toData ...

  5. python全栈开发教程目录

    python入门到进阶 Python基础2——数据类型的操作 Python基础——函数入门 Python基础——函数进阶 Python基础——函数的装饰器 Python基础——函数的装饰器 Pytho ...

  6. vue点击出现蒙版

      需求: 1.点击一个事件时弹出一个蒙版: 2.蒙版上有取消,删除事件:(点击取消时候蒙版消失,点击删除时,删除蒙版并消失): 3.点击空白地方,蒙版也消失:   <template> ...

  7. vue 简介 vue 项目 组件

    1. 概念 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.能够为复杂的单页应用提供驱动. 2. 用法 2.1 声明式渲染 2.1.1 改变文本     {{ m ...

  8. ARM调试器只能偶尔连接成功问题

    这里分析一个ARM板子JTAG调试器经常连接失败,只能偶尔连上目标板问题. 背景 这是原先另一个部门的板子,在部门合并之后,最近要对这个板子的代码体系进行转移,在过问开发进度时,工程师反映这个板子调试 ...

  9. 利用python自动发邮件

    工作中有时长时间运行代码时需要监控进度,或者需要定期发送固定格式邮件时,可以使用下面定义的邮件函数. 该函数调用了outlook和qqmail的接口,只需要放置到python的环境目录中即可 impo ...

  10. Spring Framework Part4 self-summeries-a simplified MVC framework

    1.关于Spring Framework xml的头部 <?xml version="1.0" encoding="UTF-8"?> <bea ...