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.js 自带阻止默认事件阻止冒泡

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