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. 面试mysql表设计要注意啥

    面试官:讲讲mysql表设计要注意啥? 引言 大家应该知道烟哥最近要(tiao 咳咳咳),嗯,不可描述! 随手讲其中一部分知识,都是一些烟哥自己平时工作的总结以及经验.大家看完,其实能避开很多坑.而且 ...

  2. 12.AutoMapper 之Null替换(NullSubstitution)

    https://www.jianshu.com/p/3f86f237d1db Null 替换(Null Substitution) Null 替换允许当源类型成员在成员链任何位置为Null时给目标成员 ...

  3. qt table中字体倾斜

    在itemdelegate,的paint事件中添加 QStyleOptionViewItem newOption(option);                QTransform transfor ...

  4. Proxy&Reflect

    大部分时候我们使用的都是前置代理, 即我们把直接和代理对象进行交互(所有操作都发生在代理对象身上)的方式叫做前置代理. 那什么是后置代理? 借助原型链机制, 我们直接和 obj 进行交互而不是和代理对 ...

  5. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. PHP5 构造函数

    在最近自己写的PHP小程序中遇到了如何使用PHP构造函数的情况,在PHP中允许我们在一个类中定义一个构造函数 如: <?php class User { public $name; functi ...

  7. kbd_mode - 显示或者设置键盘模式

    总览 (SYNOPSIS) kbd_mode [ -auks ] 描述 (DESCRIPTION) 如果 没有 参数 kbd_mode 会 显示 当前 键盘 的 模式, 如果 有 参数, 它会把 键盘 ...

  8. 带gcd大数模板

    int ten[4] = {1,10,100,1000}; typedef struct BigNumber { int d[1200]; BigNumber(string s) { int i, j ...

  9. zencart后台订单详细页显示产品图片和链接

    方法一: 找到admin/order.php 大约491行 for ($i=0, $n=sizeof($order->products); $i<$n; $i++) { 与 if (iss ...

  10. bootstrap-table给每一行数据添加按钮，并绑定事件

    https://blog.csdn.net/mht1829/article/details/72633100 https://blog.csdn.net/qq_39215166/article/det ...