<div id="app">
<div @click="dodo">
<button @:click="doThis">阻止单击事件继续传播</button>
</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>

将会先弹出“noclick”,再弹出“dodo”。


    <div id="app">
<div @click="dodo">
<button @click.stop="doThis">阻止单击事件继续传播</button>
</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>

只弹出“noclick”

vue click.stop阻止点击事件继续传播的更多相关文章

  1. js阻止点击事件的冒泡的实现

    <html> <head> <script type="text/javascript"> function fnclick1(){ alert ...

  2. jquery click()方法模拟点击事件对a标签不生效

    if(e.keyCode == 13) { $items.eq(index).click(); return; } 搜索框下拉列表模拟点击时间,使用上述代码不能触发链接跳转 1,页面使用了bootst ...

  3. vue 遮罩层阻止默认滚动事件

    vue中提供 @touchmove.prevent 方法可以完美解决这个问题. <div class="child" @touchmove.prevent ></ ...

  4. jquery click()方法模拟点击事件对a标签不生效的解决办法

    阅读数:8971 <a href="www.baidu.com"></a> 1 问题分析 点击A标签本身,并不会触发跳转到指定链接的事件,就是说,我们平时都 ...

  5. vue router-link 上添加点击事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...

  6. embed标签 阻止点击事件 让父元素处理点击事件

    由于规定页面显示的PDF文件要有固定大小,使得页面风格统一 最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a ...

  7. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  8. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  9. Android学习-----Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

随机推荐

  1. 【dp】 AreYouBusy

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3535 题意: 多组背包, 0类型为为至少去1样, 1为至多取1样, 2 为随意. 如果将2类型 再添加 ...

  2. TestNG+Maven+IDEA 环境配置+入门

    一.环境配置 1.安装IDEA(参考:https://blog.csdn.net/m0_38075425/article/details/80883078) 2.在Prefernces,通过Plugi ...

  3. 如何评价 Vue 的 Function-based Component?

    作者:匿名用户链接:https://www.zhihu.com/question/325397290/answer/708418099来源:知乎 事实性错误: 那 vue 呢?它连 HOC 都没有,r ...

  4. API规范约定

    为了高效开发,节约编写文档的成本,API服务使用Swagger来描述 一.API设计原则 控制API的粒度和数量 命名要遵循简单.可读.统一原则: 优先设计API,然后编码 二.URL设计[针对后端开 ...

  5. 新闻实时分析系统 Spark Streaming实时数据分析

    1.Spark Streaming功能介绍1)定义Spark Streaming is an extension of the core Spark API that enables scalable ...

  6. C#Windows Forms 使MessageBox顶层显示--xdd

    方法1. MessageBox.Show("Text", "Caption", MessageBoxButtons.OK, MessageBoxIcon.Inf ...

  7. day 23 复习

    本来应该学习day23,由于上午未学习,下去困,导致今天未进行进度 那就做一下简单的复习吧! 1. while else结构,如果while 后的条件条件不再满足 引发循环再继续,则执行else中的内 ...

  8. 2019牛客暑期多校训练营(第九场)Quadratic equation——二次剩余(模奇素数)

    题意:给定p=1e9+7,构造x,y使其满足(x+y) mod p = b,(x*y) mod p = c . 思路:不考虑取模的情况下, .在取模的意义下,,因为a是模p的二次剩余的充分必要条件为  ...

  9. python 2.x 中print >> sys.out ,print 与sys.out.write()的关系

    print 会调用 sys.stdout 的 write 方法 以下两行在事实上等价: sys.stdout.write('hello,python'+'\n') print 'hello,pytho ...

  10. 是谁,在敲打我窗-CSS雨滴动画效果

    1.扯闲篇 是谁在敲打我窗  是谁在撩动琴弦  那一段被遗忘的时光 渐渐地回升出我心坎  是谁在敲打我窗  是谁在撩动琴弦 记忆中那欢乐的情景  慢慢地浮现在我的脑海 那缓缓飘落的小雨  不停地打在我 ...