注意:prevent 阻止的是“跳转事件”而不是“弹出警告”

v-on:click.prevent.self的demo如下:

<div id="box">
<div @click="alert(1)">
<a href="/#" @click="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
</div>
此时点击a标签会依次弹出2,1,跳转。点击div标签会依次弹出3,2,1,跳转。这发生了事件冒泡。

咱们看一下加上v-on:click.prevent.self之后的:

<div @click="alert(1)">
<a href="/#" @click.prevent.self="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
此时点击a标签会依次弹出2,1。点击div标签会依次弹出3,1。此时各位看官已经发现,a标签不仅没有冒泡,也没有跳转,这就是官网说的会阻止所有的点击。

这段是“没文化不开心”网友的解释:

点击div标签,会alert3,alert1。不但阻止了alert(2),还阻止了a的默认跳转。

因为点击的时候会先prevent,阻止默认事件,阻止了跳转;然后判断是否是self,因为点击到的是div标签,所以不是self。但是a标签是self,阻止了alert(2)。

v-on:click.self.prevent的demo如下:

<div @click="alert(1)">
<a href="/#" @click.self.prevent="alert(2)">a标签
<div @click="alert(3)">div标签</div>
</a>
</div>
点击div标签会依次弹出3,1,跳转。此时a标签没有响应弹框,但是发生了跳转,这就是官网说的只会阻止对元素自身的点击。

这段是“没文化不开心”网友的解释:

点击div标签,会alert3,alert1,跳转到/#。只阻止了alert(2)。

因为会先判断self,点击到div3,不是self,所以不会执行click事件,就不会执行 阻止默认事件和alert(2) ,所以可以跳转

————————————————
版权声明:本文为CSDN博主「bug菌」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_39105508/article/details/83008604

@click.prevent.self和@click.self.prevent区别的更多相关文章

  1. jQuery的区别:$().click()和$(document).on('click','要选择的元素',function(){})的不同

    jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$(document).on('click','要选择 ...

  2. hexo next中遇到的bug,引发出的关于jquery中click()函数和on("click",function())的区别

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...

  3. $().click()和$(document).on('click','要选择的元素',function(){})的不同

    1. $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn.只针对与页面已存在的选择器; 2.$(document).on('click','要选择的元素',function(){ ...

  4. $().click()和$(document).on('click','要选择的元素',function(){})的不同(转https://www.cnblogs.com/sqh17/p/7746418.html)

    $(document).on();用于动态绑定事件 jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$ ...

  5. 当一个HTML元素需要添加mouseon、mouseout与click事件,或者mouserenter、mouseleave和click事件时,click事件无法触发

    当一个HTML元素需要添加mouseon.mouseout与click事件,或者mouserenter.mouseleave和click事件时,click事件无法触发 针对上述问题,我遇到的有两种情况 ...

  6. 5 Ways to Prevent the 300ms Click Delay on Mobile Devices

    http://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/

  7. 【jQuery 区别】.click()和$(document).on("click","指定的元素",function(){});的区别

    给出以下的代码展示: //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label ...

  8. $("#XXX").click()和$("#YYY").on("click","指定的元素",function(){});的区别(jQuery动态绑定事件)

    //绑定 下一页 的点击事件 $("a[aria-label='Next']").click(function(){ $("a[aria-label='Previous' ...

  9. jQuery的on绑定click和直接绑定click区别

    状况之外 在之前的公司并没有遇到这个问题,也就没有深究.直到自己换了现在的公司,刚来第二天就开始写别人写到一半的项目,很无奈,不是原生就是jquery,由于项目急,已经来不及切换框架重新布局,只能继续 ...

随机推荐

  1. windows下mysql 主库从库同步

    今天先讲讲数据库的主从同步,两个好处: 一是读写分离可以用上.比如 写操作就写到主数据库,读就再从库读取 二是纯粹给数据库备份,以防硬盘彻底崩了 主从数据库操作准备: 两台电脑,都安装好mysql 5 ...

  2. vue中用watch监听当前路由

    之前做项目时,特别是后台项目,左边都有侧边栏,我们需要做到点击某个侧边栏的项让这个项高亮,之前采用的是给每个项绑定一个值,点击某个项时,就将这个值付给一个变量,在每一项上判断这个变量是否与每项上的值相 ...

  3. codeforces#1183F. Topforces Strikes Back(数论)

    题目链接: http://codeforces.com/contest/1183/problem/F 题意: 给出n个数,找出最多三个互不整除的数,取最大的和 数据范围: $1 \le n \le 2 ...

  4. Android学习_MVC与Adapter

    一.           MVC模式 MVC模式代表Model-View-Controller(模型-视图-控制器)模式.这种模式用于应用程序的分层开发. Model(模型):代表一个存取数据的对象或 ...

  5. redis基础操作概念等笔记

    Redis常用配置 daemonize ->是否是后台进程 port ->对外端口 logfile ->Redis 系统日志 dir ->Redis 工作目录 Redis的链接 ...

  6. php反序列化笔记

    普通的魔法方法 public,private,protected属性序列化后的不同 绕过wakeup session反序列化 phar反序列化 1.普通的魔法方法 __construct() 创建一个 ...

  7. .netcore centos配置systemctl自动启动

    systemd分两种服务系统和用户服务 对应存储位路径为系统(/usr/lib/systemd/system).用户(/etc/systemd/user/) [Unit] Description=ap ...

  8. 查看openstack各组件小版本号

    查看api版本号 因为要判断openstack的某个小功能是否支持,需要确定api版本号大于某个版本,故需要查询现有环境api版本号 如查看cinder-api的版本号 指定api版本调api 在he ...

  9. 微信小程序tabBar的一个小坑

    开始接触微信小程序的项目开发时,自己想添加底部导航,按照文档的方法在app.json添加tabBar,结果编译不出,工具台也没错误提示. 尝试在网上搜一下,看到有碰到类似情况的,解决方法是:app.j ...

  10. 关于 /proc/sys/net/ipv4/下 文件的详细解释

    关于 /proc/sys/net/ipv4/下 文件的详细解释: 1) /proc/sys/net/ipv4/ip_forward  该文件表示是否打开IP转发.      0,禁止      1,转 ...