注意: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. 如何检测域名是否被微信屏蔽 微信域名检测接口API是如何实现

    微信域名检测技术的主要用户是微信域名防封,大家知道拼多多这种网站,靠诱导分享方式在微信里面摇身一变已经估值160亿美元,身价仅次于京东了 ,这是何等的速度,简直是惊为天人,but 如果你想玩微信病毒营 ...

  2. Linux版本内核及安装后的简单操作命令介绍

    一.Linux的版本与内核 1.Linux发行版 Linux发行版= Linux内核+应用程序 Redhat,CentOS,Ubuntu,Suse,红旗,Mint,Fedora CentOS:社区版操 ...

  3. mac -bash: ll: command not found

    在linux系统下我们经常使用ll.la命令.但在mac系统时缺没有. 提示:-bash: ll: command not found. 这是因为ll.la不是真的命令,而是一些常用命令和参数搭配的别 ...

  4. python上下文小记

    python访问数据库是日常编程中经常使用的,一般的代码如下: 可以看出样例代码还是比较多的,有没有办法优化一下呢?有! def send_msgs(conn_id=None, **kwargs): ...

  5. ES节点分析

    ES集群概念 集群 一个集群cluster由一个或者多个节点组成,具有相同的cluster.name,协同工作,分项数据和负载. 当有新的节点加入或者删除了一个节点时,集群回感知到并能够平衡数据. E ...

  6. spark MLlib的 pipeline方式

    spark mllib的pipeline,是指将多个机器学习的算法串联到一个工作链中,依次执行各种算法. 在Pipeline中的每个算法被称为"PipelineStage",表示其 ...

  7. leetcode探索高级算法

    C++版 数组和字符串 正文 链表: 正文 树与图: 树: leetcode236. 二叉树的最近公共祖先 递归(先序) leetcode124二叉树最大路径和 递归 图: leetcode 547朋 ...

  8. apache整合tomcat中的一些注意事项

    1.整合完毕后,需要把项目同时部署在apache和tomcat中,不然会报错找不到资源 2.可以把tomcat和apcahe的项目路径设置为同一个 3.使用java框架时容易出现异常:The requ ...

  9. python之scrapy爬取某集团招聘信息以及招聘详情

    1.定义爬取的字段items.py # -*- coding: utf-8 -*- # Define here the models for your scraped items # # See do ...

  10. C# VS预生成事件命令行 和 生成后事件命令行

    宏 说明 $(ConfigurationName) 当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir) 输出文件目录的路径,相对于项目目录.这解析为“输出目录”属性的值. ...