click.stop 阻止事件冒泡与click.prevent 阻止执行默认事件

最新推荐文章于 2024-05-09 12:10:41 发布
最新推荐文章于 2024-05-09 12:10:41 发布
阅读量715 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46566658/article/details/113997401
版权

click.stop 阻止事件冒泡与click.prevent 阻止执行默认事件

自己总是记不住，写了个小demo加强记忆

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 
@click.stop 阻止事件冒泡
@click.prevent 阻止执行默认事件
第一种执行顺序是：先提示2——》在提示1 ——》 提示"阻止跳转到百度"——》在跳转到百度
第二种执行顺序是：先提示2——》在提示"阻止跳转到百度"  阻止了冒泡跟默认事件
-->
<body>
  <div id="app">
    <p>第一种：没有修饰符</p>
    <div @click="btn1">
      <div @click="btn2">click.stop</div>
    </div>
    <div>
      <a href="http://baidu.com.cn" target="_blank" rel="noopener noreferrer" @click="btn3">click.prevent</a>
    </div>
    <hr>
    <p>第二种：添加修饰符</p>
    <div @click="btn1">
      <div @click.stop="btn2">click.stop</div>
    </div>
    <div>
      <a href="http://baidu.com.cn" target="_blank" rel="noopener noreferrer" @click.prevent="btn3">click.prevent</a>
    </div>
  </div>
</body>
<script src="../../js/vue/vue2.js"></script>
<script>
  new Vue({
    el:"#app",
    methods:{
      btn1() {
        alert(1);
      },
      btn2() {
        alert(2)
      },
      btn3() {
        alert("阻止跳转到百度")
      }
    }
  })
</script>
</html>
徐up
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-...此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop=’xx()’ .stop .prevent .capture .self .once <a></a> <!
详解vue.js的事件处理器v-on:click
10-19
- `.prevent`：阻止默认行为，如表单提交。 - `.capture`：在捕获阶段触发事件处理器。 - `.self`：只有当事件的目标元素是当前元素时才触发处理器。 - `.once`：只处理一次事件，之后自动解绑。 例如，如果你想...
Vue.js：事件修饰符stop,once,prevent的使用
热门推荐
万物皆可学
06-22 3万+
学习Vue.js第二天 vue.js官方事件修饰符介绍地址：轻轻的点摸我就可以跳过去了哦 我是接着上一篇博客写的：地址在这 .stop : 阻止冒泡事件 <div id="view" v-on:mousemove=" updateXY ">{{x}},{{y}} -- <span v-on:mousemove.stop>停止</span></div>...
阻止事件的默认行为，例如click <a>后的跳转~
07-10 105
在W3C中，使用preventDefault()方法； 在IE中，使用window.event.returnValue = false。 转载于:https://www.cnblogs.com/YYvam1288/p/7144808.html
Vue中@click.stop和@click.prevent实例详解
最新发布
菜鸟教程
05-09 534
到此这篇关于Vue中@click.stop和@click.prevent详解的文章就介绍到这了,更多相关Vue中@click.stop和@click.prevent内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/
Jquery click/bind/live/delegate/on事件，阻止默认事件，以及插件的写法
球球之家
06-26 999
几种常见事件介绍，阻止事件传递的三种写法，插件的编写模板
vue click阻止事件冒泡与默认行为
weixin_43829905的博客
05-14 1万+
vue click阻止事件冒泡与默认行为阻止事件冒泡阻止默认行为 阻止事件冒泡 <div @click="click1()" > <a @click="click2()"></a> </div> //正确写法 <div @click="click1()" > &...
事件对象，阻止事件默认行为，阻止冒泡
imkaifan的博客
09-28 547
只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。 event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员。 要阻止特定事件的默认行为，可以使用==preventDefault()==方法。例如，链接的默认行为就是在被单击时会导航到其href特性指定的URL。如果你想阻止链接导航这一默认行为，那么通过链接的onclick事件处理程序可以取消它，如下面的例子所示。 只有ca
javascript: click 阻止冒泡事件
我的地盘
10-17 1343
var lastli = null; function Show(currentLi, index, evt) { doSomething(evt); //在阻止事件的下面写自己的处理流程，切忌不要写在
详解vue事件对象、冒泡、阻止默认行为
08-31
详解 Vue 事件对象、冒泡、阻止默认行为 Vue 事件对象是 Vue 框架中处理事件的核心对象，负责处理用户交互事件，如点击、键盘输入、鼠标移动等。下面对 Vue 事件对象、冒泡、阻止默认行为进行详细介绍。 Vue 事件...
重新认识vue之事件阻止冒泡的实现
10-18
Vue还提供了其他的事件修饰符，如`.prevent`用于阻止默认行为（如表单提交），`.capture`用于在事件冒泡开始时触发事件处理函数，`.self`只在事件发生在目标元素自身时触发，`.once`只触发一次，以及`.passive`优化...
js-@click.stop与@click.prevent
2301_76671906的博客
09-26 660
@click.stop与@click.prevent阻止事件冒泡执行
javascript @click.stop=“a()” && @click.prevent=“b()“
MyFreeIT
06-04 352
click.stop 阻止父component执行click，只有本component的click有效。@click.prevent 阻止的href执行，转而执行prevent指定的方法。另外JS 调用方法时，可以不加（），" " 等，可以直接使用函数名。不过为了统一和易读性，建议还是书写完整。
@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)
qq_32184753的博客
07-10 2万+
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", dat
关于Vue的事件冒泡【html，stop】
qq_22841387的博客
03-12 786
事件冒泡 最近看到关于事件冒泡，于是进行了实验。整个测试基于HTML，不是一个完整项目 先写代码如下 <!DOCTYPE html> <html lang='zh_cn'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=de
@click.stop的作用
逆风优雅的博客
03-21 2335
@click.stop表示阻止事件向外传播（即: 阻止事件冒泡） 代码演示 <template> <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止点击事件继续向外传播</button> </div> </div> </template> <script> ex
vue事件修饰符：通过@click.prevent 阻止事件的默认行为
学亮编程手记
12-17 817
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style&gt
JS - e.preventDefault()与e.stopPropagation()
kelly0721的博客
02-10 2185
事件冒泡 e.stopPropagation()阻止事件冒泡 事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件 一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...
分享html jquery 中的stop();方法
IT_ananda的专栏
09-04 294
跟大家分享一个关于jquery中点击停止的方法，希望可以帮助到大家 引入jquery $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $(...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
05-30
而@click.prevent则会阻止默认事件的触发，比如在a标签上使用@click.prevent会阻止其默认的跳转行为。 至于按键修饰符@keyup.enter，则是用来监听键盘按键的指令，只有当用户敲击了"Enter"键时，相应的方法才会被...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值