冒泡（阻止冒泡）

最新推荐文章于 2023-12-28 11:37:40 发布
最新推荐文章于 2023-12-28 11:37:40 发布
阅读量77 收藏 1
点赞数 1
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45133582/article/details/117069279
版权

冒泡：

HTML:

<!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>5.10.html</title>
    <link rel="stylesheet" href="css/5.10.css">
</head>

<body>
    <div id="nav1">nav1
        <div id="nav2">nav2
            <div id="nav3">nav3</div>
        </div>
    </div>
    <script type="text/javascript" src="js/5.10.js"></script>
</body>

</html>

CSS:

#nav1 {
    width: 300px;
    height: 300px;
    background: red;
    margin: 0px;
    padding: 0px;
}

#nav2 {
    width: 200px;
    height: 200px;
    background: rgb(47, 0, 255);
    margin: 0px;
    padding: 0px;
}

#nav3 {
    width: 100px;
    height: 100px;
    background: rgb(1, 255, 14);
    margin: 0px;
    padding: 0px;
}

JS:

document.getElementById("nav1").onclick = function(e) {
    alert("nav1");
}
document.getElementById("nav2").onclick = function(e) {
    alert("nav2");
}
document.getElementById("nav3").onclick = function(e) {
    alert("nav3");
}

阻止冒泡：

JS:

document.getElementById("nav1").onclick = function(e) {
    alert("nav1");
}
document.getElementById("nav2").onclick = function(e) {
    alert("nav2");
    e.stopPropagation();
}
document.getElementById("nav3").onclick = function(e) {
    alert("nav3");
    e.stopPropagation();
}

加上if判断：

JS:

document.getElementById("nav1").onclick = function(e) {
    if (e.target.id == "nav3") {
        alert("nav3");
    } else if (e.target.id == "nav2") {
        alert("nav2");
    } else {
        alert("nav1");
    }
}

 

吃蛋糕的居居
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react阻止冒泡事件
大灰狼的小绵羊哥哥的博客
05-16 1万+
最近在研究react、redux等，网上找了很久都没有完整的答案，如果对你有用就关注一下，以后都会有干货分享的，谢谢。 首先，要知道再react中的合成事件和原生事件之间的区别http://www.jianshu.com/p/e0894bd588f4。 1、合成事件 在jsx中直接绑定的事件，如 a ref="aaa" onClick={(e)=>this.handleClick(
react阻止事件冒泡
蒲厷渶と戀的博客
04-10 7009
React阻止冒泡事件的方法，主要分为如下两种情况：1、阻止合成事件间的冒泡，方法：e.stopPropagation();事件绑定如下：阻止事件冒泡的写法如下：2、阻止合成事件与最外层document上的事件间的冒泡，方法：e.nativeEvent.stopImmediatePropagation();事件绑定写法：（1）不传参数：（2）传参数：阻止事件冒泡的写法：这样写的原因，是给docum...
react 阻止事件冒泡
山外小楼
03-02 1078
当我们在一个div 父级盒子有点击事件，子级也有点击事件时，不想点击子级事件触发父级事件就需要做阻止冒泡处理。 import React, { useState} from 'react' function Model(){ const clickShowModel=(event,props)=>{ event.stopPropagation(); } ...
利用JQuery阻止事件冒泡
10-20
除了使用event对象的方法外，JQuery的事件处理函数还提供了一个简写形式来阻止冒泡，即直接在事件处理函数的末尾返回false。这等同于调用了event.stopPropagation()和event.preventDefault()。例如： ```javascript...
js阻止冒泡
02-26
js阻止冒泡 $(document).click(function(){ $(".scxl").children('ul').hide(); })
React冒泡和阻止冒泡的应用详解
11-19
在React开发中，事件处理是不可或缺的一部分，而事件冒泡和阻止冒泡是理解JavaScript事件模型的关键概念。事件冒泡是指事件从最深的节点开始，逐级向上传播到最外层节点的过程。在React中，由于其事件处理机制，理解...
Js冒泡事件详解及阻止示例
10-26
例如，`ialertdouble`函数通过调用`stopBubble`来阻止冒泡，而`ialertthree`不仅阻止冒泡，还使用`preventDefault`防止链接跳转。对于使用jQuery的情况，可以直接在事件处理函数内调用`event.stopPropagation()`，...
事件委托与阻止冒泡阻止其父元素事件触发
09-04
在JavaScript事件处理中，事件委托和阻止冒泡是两个重要的概念，它们对于优化网页性能和控制事件流有显著作用。本文将深入探讨这两个概念，并通过一个具体的示例来解释如何运用它们来避免不必要的事件触发。 事件...
React中阻止事件冒泡的问题详析
01-19
前言 最近在研究react、redux等，网上找了很久都没有完整的答案，索性自己整理下，这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容，下面话不多说了，来一起看看详细的介绍吧 在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。 JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。 IE9 及之前的版本只支持冒泡                   |  A  —————–|–|—————–  | Parent         |  |   
React 阻止事件冒泡
刻痕
05-07 1439
React 阻止事件冒泡 处理 子元素是事件 添加： e.stopPropagation(); function childrenClick(e){ e.stopPropagation(); // ... 其他 }
React阻止事件冒泡
Myh_s的博客
10-17 389
React 如何阻止事件冒泡？(https://segmentfault.com/q/1010000008966738) React 为提高性能，有自己的一套事件处理机制，相当于将事件代理到全局进行处理，也就是说监听函数并未绑定到DOM元素上。 因此，如果你禁止react事件冒泡e.stopPropagation()，你就无法阻止原生事件冒泡； 你禁用原生事件冒泡e.nativeEvent.sto...
React中阻止事件冒泡
xiaopeng_han123的博客
06-14 3034
stopPropagation: function(e){      e.stopPropagation();      e.nativeEvent.stopImmediatePropagation();  } 
react中阻止事件冒泡
热门推荐
w799766的博客
09-10 2万+
直接看栗子： 页面上3个div，如图所示 1、在没有涉及到原生事件注册只有react事件时，用e.stopPropagation()阻止冒泡，代码如下： import React, { Component } from 'react'; import './App.css'; class App extends Component { handleClickTestBox = (...
React 中阻止事件冒泡的问题
Nnn_Lillian的博客
01-09 138
https://www.cnblogs.com/Wayou/p/react_event_issue.html
React onClick 事件阻止冒泡
天问博客-专注于大前端技术
12-28 1494
在 React 中，你可以通过使用 onClick 事件来处理点击事件，并且可以通过在事件处理函数中调用 stopPropagation() 方法来阻止事件冒泡。本文将为你提供 类组件 和 函数式组件 两种示例。
React 阻止默认事件和阻止冒泡
Fluoxet_i_ne的博客
07-16 929
给 a 标签添加一个事件 阻止默认事件 e.preventDefault(); class view extends Component { onAtag(e) { // 阻止默认事件 放置跳转 e.preventDefault(); console.log("烦烦烦滚滚"); } render() { return ( <div> <a href='true' onClick={(e) => { this.on.
bindtap 阻止冒泡
最新发布
01-13
bindtap事件是微信小程序中的一个触摸事件，用于绑定点击事件。而冒泡是指事件在触发后会向父元素传递，直到被阻止或到达最外层元素。在微信小程序中，可以通过catchtap事件来阻止bindtap事件的冒泡传递。 下面是一个示例代码，演示了如何使用catchtap事件来阻止bindtap事件的冒泡传递： ```html <view bindtap="parentTap"> <view bindtap="childTap" catchtap="stopPropagation"> 点击我 </view> </view> ``` ```javascript Page({ parentTap: function() { console.log('父元素被点击'); }, childTap: function() { console.log('子元素被点击'); }, stopPropagation: function() { console.log('阻止冒泡'); } }) ``` 在上面的代码中，当点击子元素时，会触发子元素的bindtap事件和父元素的bindtap事件。但是，由于子元素的catchtap事件调用了stopPropagation函数，阻止了事件的冒泡传递，所以父元素的bindtap事件不会被触发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值