以下是Js阻止事件冒泡行为 event.stopPropagation()

<!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>js阻止事件冒泡行为</title><style>#outterDiv{width: 500px;height: 500px;background:red;overflow: hidden;}#innerDiv{width: 200px;height: 200px;background:green;margin: 150px auto;}</style>
</head>
<body><div id="outterDiv"><div id="innerDiv"></div></div>
</body><script>var outter = document.querySelector("#outterDiv")var innerer = document.querySelector("#innerDiv")outter.onclick=function(){console.log("外层div outter事件触发了");}innerer.onclick=function(){console.log("内层div innerer事件触发了");event.stopPropagation() //阻止事件冒泡}</script>
</html>

以下是Vue阻止事件冒泡行为 event.stopPropagation()

<!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>vue阻止冒泡行为</title><script src="../vue库/vue.js"></script><style>#outterDiv{width: 500px;height: 500px;background:red;overflow: hidden;}#innerDiv{width: 200px;height: 200px;background:green;margin: 150px auto;}</style>
</head>
<body><!-- Vue组件事件冒泡有两种 注：在子级标签中阻止@click.stop="inner"event.stopPropagation()--><div id="app"><div id="outterDiv" @click="outter"><div id="innerDiv" @click.stop="inner"></div></div></div></body><script>var app = new Vue({el:"#app",methods: {outter(){console.log("外层div outter事件触发了");},inner(){console.log("内层div outter事件触发了");// event.stopPropagation()}},})</script>
</html>

Js、Vue阻止事件冒泡行为相关推荐

vue 阻止事件冒泡，捕获方法
要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js 事件的三阶段捕获阶段目标阶段:执行当前对象的事件处理程序冒泡阶段 2. js 阻 ...
vue 阻止事件冒泡和捕获
vue 阻止事件冒泡和捕获 @click.stop : 阻止事件冒泡 @click.prevent : 阻止事件默认行为 @click.self : 事件只作用在元素本身,而不是其子元素
Vue和Js的阻止事件冒泡和阻止默认事件方法
原生js取消事件冒泡 try{e.stopPropagation();//非IE浏览器}catch(e){window.event.cancelBubble = true;//IE浏览器} 原生js阻 ...
Vue阻止事件冒泡的两种方式
1.阻止事件冒泡方式1 如下有父子标签的点击事件在子类中调用stopPropagation()方法即可禁止事件的传递 boxClick:function () {alert("父标签被点击 ...
js jquery阻止事件冒泡
 <script>//id:数据唯一id img_url:图片地址 title:标题 num:页面对应的第几个列表function setHtml(id, ...
Vue 阻止事件冒泡
转载自 Vue2学习笔记:事件对象.事件冒泡.默认行为 1.事情对象 <!DOCTYPE html> <html> <head><title>< ...
JS、Vue、React阻止事件冒泡及阻止默认事件
JS阻止事件冒泡及阻止默认事件解决方案: 1.event.preventDefault -- 阻止默认 Event 接口的 preventDefault()方法,告诉user agent:如果此事件没 ...
vue中阻止事件冒泡
vue阻止事件冒泡问题描述: 使用的element-ui的dialog对话框,在对话框的父组件还有点击事件,点击dialog对话框时也会相应外部父组件的点击事件. <el-dialogtitl ...
Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...

Js、Vue阻止事件冒泡行为

以下是Js阻止事件冒泡行为 event.stopPropagation()

以下是Vue阻止事件冒泡行为 event.stopPropagation()

Js、Vue阻止事件冒泡行为相关推荐

最新文章

热门文章