vue点击事件阻止冒泡

vue.js 自带阻止默认事件阻止冒泡

<a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"> &

vue 点击事件阻止冒泡用stop

1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'

经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() 阻止默认行为 $event.preventDefault() 代码实例--tab切换 // html 行内阻止 <div ng-click="parentTab(1,$event)">父盒子点击 <div class="sw_active" ng-cl

html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> <div class="title login" style="color: #fff;font-size: 14px" id="personalInfo"> 你好, <span style="color:#fff;font-

重新认识vue之事件阻止冒泡

冒泡的表现近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item, index) in listData" @click="handleClick3"> <el-col :span="grid"> <div @click="handleClick1"></div>

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

<html> <head> <script type="text/javascript"> function fnclick1(){ alert("父元素弹窗") } function fnclick2(e){ //阻止跳转到其它页面(如提交表单跳转等) //e.preventDefault(); //阻止点击事件向上冒泡 e.stopPropagation(); alert("子元素弹窗"); } </

javascript 的事件--阻止冒泡

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body> <input type="button" id="btn1" value="点击"> <

position布局影响点击事件以及冒泡获取事件目标

在编写功能时总是会出现很多意想不到的问题,现在就讲讲我遇到的两个问题,通过举一个相似的例子来解说. <1> 元素互相独立,不存在包含于被包含选择城市的按钮,为它绑定点击事件,点击后就弹出城市列表层,城市列表层设置了position与z-index的值来进行布局,然后再点击选择城市按钮,点击事件就不起作用了,反而是城市列表层的点击事件起作用,这说明只有显示在最上面的一层绑定的事件可以起作用,即使最上面的一层没有全部盖住下面的内容,下面的内容绑定的事件也不起作用,所以要想让选择城市按钮绑定的点击

javascript总结35:DOM之给a注册点击事件, 阻止a标签的默认行为

给a注册点击事件时,有默认行为,阻止默认行为的方式: retrun false <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="">点击在控制台打印哈哈哈</a&

JS事件阻止冒泡的写法

$("body").on("click", "#id", function (ev) { ev = ev || event;要写的逻辑代码 ev.stopPropagation();//这个方法可以阻止事件的冒泡 });

Vue 点击事件怎么传递 this ？

Part.1 问题如何使上面的三个按钮单个点击后实现第一个按钮现在的样式呢? Part.2 思路为当前点击的按钮添加一个单独的类名,我的做法: .active { background: #3C8DBC; color: white} 为当前点击的按钮添加一个 .active 类,但是在每次为当前点击的按钮添加类名时,其它的按钮需要删除 .active 类名才行 Part.3 解决每次点击时先 remove 掉按钮的 .active 类, 然后单独给当前点击按钮添加 .active. 如

Vue点击事件失效

在做项目时给button添加click事件,发现没反应,但另外写了一个button添加同样的事件,却能触发.原因是使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: true 例: mounted () { this.scroll = new BScroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true }) }

mui switch 点击事件不冒泡

工作上遇到一个问题手机移动端app,采用mui框架,要求左边是手机号码,右边是switch开关,并且点击标题的时候,可以展开下面人员的基本信息. 采用了折叠面板. 先上图如下: 开始时出现的问题是:点击右侧开关按钮,也会联动把基本信息打开,不想这样,想要点击开关按钮与折叠面板没有关系,就需要取消点击冒泡操作: 关键代码如下 <ul class="mui-table-view"> <li class="mui-table-view-cell mui-coll

js 事件阻止冒泡

参考 https://www.cnblogs.com/zhuzhenwei918/p/6139880.html event.stopPropagation();

vue 点击事件唤醒QQ

window.location.href = 'http://wpa.qq.com/msgrd?v=3&uin=QQ号' window.location.href = 'http://wpa.qq.com/msgrd?v=3&uin=2795811771'

点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div").click(function(e){ e.stopPropagation();});$(document).click(function(){ $("#div").hide();});实现了点击其它地方隐藏div后遇到了另一个问题.我的div内部使用了bootstrap的tab组件,di

JS中点击事件冒泡阻止

JS中点击事件冒泡阻止解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是并不希望触发out的点击事件,只希望触发in层的点击事件,所以要阻止冒泡事件. 解决方法: e.preventDefault() 案例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l

label 阻止冒泡防止点击label 触发2次事件

// 必须要把 jnput的外面的label加上事件阻止冒泡,否则点击label的时候,会冒泡到input上再次触发input的点击事件 $('.xt_order_cleft_modb_rl_dx').on('click','.xt_order_cleft_modb_rl_dx_lb',function (e) { e.stopPropagation(); e.cancelBubble=true; });

(O)阻止默认事件和阻止冒泡的应用场景

场景1:阻止默认事件比如这样的一个需求点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为, 所以需要在点击取消的时候阻止冒泡,防止其跳转. <a id='cancelBtn' href="https://www.baidu.com">取消按钮</a> <script> document.getElementById("cancelBtn").addEventListener("clic

app内嵌vue h5，安卓和ios拦截H5点击事件

安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的安卓和ios拦截普通h5函数: <div onclick = "show(),window.android.show()"></div> <script> function show(){ //如果需要传值,可以在show里添加参数,在上面的点击事件中直接进行传值就好 alert(1) } </script> vue函数并没有直接暴漏在window下,vue的点击事件

vue点击事件阻止冒泡

vue.js 自带阻止默认事件阻止冒泡