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. python 列表操作-切片

  2. linux：RAID（磁盘阵列）笔记

    RAID磁盘阵列简述:     RAID0(条带): 把多个同样大小的磁盘串联起来当做一个磁盘来用.         优点:读写速度快.         缺点:数据容易丢失(没有容错能力).     ...

  3. 在Windows与Ubuntu上使用tensorboard的不同点

    (1)Ubuntu下使用TensorBoard如官网所述即可.https://www.tensorflow.org/programmers_guide/summaries_and_tensorboar ...

  4. async 异步抓取 花瓣网高清大图 30s爬取500张

    废话 不多说,直接上代码,不懂得看注释 先安装  pip install aiohttp "异步抓取花瓣网图片" # pip install aiohttp import requ ...

  5. Fliter设置字符编码，解决中文问题

    class EncodingFilter implements FileFilter{ private String encoding; @Override public boolean accept ...

  6. jQuery中outerWidth()方法

    截图自:菜鸟教程https://www.runoob.com/jquery/html-outerwidth.html

  7. js数组与对象的区别

    数组和对象两者都可以用来表示数据的集合,曾一度搞不清楚”数组”(array)和”对象”(object)的根本区别在哪里. 有一个数组a=[1,2,3,4],还有一个对象a={0:1,1:2,2:3,3 ...

  8. vue+hbuilder 打包成移动app

    查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏:最后放弃,自己结合文档搞吧! 1. 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPubl ...

  9. SpringBoot打包成jar运行脚本

    #!/bin/bash #这里可替换为你自己的执行程序,其他代码无需更改 APP_NAME=csadmin.jar #使用说明,用来提示输入参数 usage(){ echo "Usage: ...

  10. 接口开发中 遇到的坑——Java byte与C# byte 数据转换问题

    前提: 公司与其他公司进行接口对接 需要使用Byte[]数据流传输数据 原本想法如下:直接IO生成就ok了 using System; using System.IO; using System.Te ...