小工具      在线工具  汉语词典  css  js  c++  java

JS、Vue、React防止事件冒泡，防止默认事件

Web前端,javascript,react.js,vue.js 额外说明

收录于:39天前

JS防止事件冒泡，防止默认事件解决方案：

1. event.preventDefault - 防止默认

事件 接口的 preventDefault()方法，告诉用户代理：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用停止传播() 或停止立即传播()，才停止传播。

例子：

<!DOCTYPE html>
<html>
<head>
  <style>
    p { height: 30px; width: 150px; background-color: #ccf; }
    div {height: 30px; width: 100%; background-color: #cfc; }
  </style>
</head>
<body>
<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox"/>
</form>

<div id="output-box"></div>
<script>

  document.querySelector("#id-checkbox").addEventListener("click", function(event) {
    document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
    event.preventDefault();
  }, false);

</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <style>
    .warning {
      border: 2px solid #f39389;
      border-radius: 2px;
      padding: 10px;
      position: absolute;
      background-color: #fbd8d4;
      color: #3b3c40;
    }
  </style>
</head>
<body>
<div class="container">
  <form>
    <input type="text" id="my-textbox">
  </form>
</div>
<script>
  var myTextbox = document.getElementById('my-textbox');
  myTextbox.addEventListener('keypress', checkName, false);

  function checkName(evt) {
    var charCode = evt.charCode;
    if (charCode != 0) {
      if (charCode < 97 || charCode > 122) {
        evt.preventDefault();
        displayWarning(
                "Please use lowercase letters only."
                + "\n" + "charCode: " + charCode + "\n"
        );
      }
    }
  }
  var warningTimeout;
  var warningBox = document.createElement("div");
  warningBox.className = "warning";

  function displayWarning(msg) {
    warningBox.innerHTML = msg;

    if (document.body.contains(warningBox)) {
      window.clearTimeout(warningTimeout);
    } else {
      // insert warningBox after myTextbox
      myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
    }

    warningTimeout = window.setTimeout(function() {
      warningBox.parentNode.removeChild(warningBox);
      warningTimeout = -1;
    }, 2000);
  }
</script>
</body>
</html>

2. event.stopImmediatePropagation - 防止冒泡

事件 接口的 stopImmediatePropagation() 方法阻止监听同一事件的其他事件监听器被调用。

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。

例子：

<!DOCTYPE html>
<html>
<head>
  <style>
    p { height: 30px; width: 150px; background-color: #ccf; }
    div {height: 30px; width: 100%; background-color: #cfc; }
  </style>
</head>
<body>
<div>
  <p>paragraph</p>
</div>
<script>
  const div = document.querySelector('div')
  const p = document.querySelector('p')
  p.addEventListener("click", (event) => {
    alert("div");
  }, false);

  p.addEventListener("click", (event) => {
    alert("p");
  }, false);

  p.addEventListener("click", (event) => {
    alert("p1");
    event.stopImmediatePropagation();
    // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
  }, false);

  p.addEventListener("click",(event) => {
    alert("p2");
    // 该监听函数排在上个函数后面，该函数不会被执行
  }, false);

  document.querySelector("div").addEventListener("click", (event) => {
    alert("p3,我是p元素的上层元素");
    // p元素的click事件没有向上冒泡，该函数不会被执行
  }, false);
</script>
</body>
</html>

3. event.stopPropagation - 防止冒泡

防止当前事件在捕获和冒泡阶段进一步传播。

然而，它并不能阻止任何默认行为的发生；例如，链接的点击仍将被处理。

如果要停止这些行为，请参见 防止默认 方法，它可以阻止事件触发后默认动作的发生。

例子：

<!DOCTYPE html>
<html>
<head>
  <style>
    p { height: 30px; width: 150px; background-color: #ccf; }
    div {height: 30px; width: 100%; background-color: #cfc; }
  </style>
</head>
<body>
<div>
  <p>paragraph</p>
</div>
<script>
  const div = document.querySelector('div');
  const p = document.querySelector('p');
  div.addEventListener("click", (event) => {
    alert("div");
  }, false);

  p.addEventListener("click", (event) => {
    event. stopPropagation();
    alert("p");
  }, false);

</script>
</body>
</html>

4. return false - 这是鸡蛋吗？

示例：默认的JS只会触发防止默认（），因此只有在JQ中return false相当于同时执行了event.stopPropagation()和event.preventDefault()。

<!DOCTYPE html>
<html>
<head>
  <style>
    p { height: 30px; width: 150px; background-color: #ccf; }
    div {height: 30px; width: 100%; background-color: #cfc; }
  </style>
</head>
<body>
<div onclick="clickDiv()">
  <p onclick="clickP()">paragraph</p>
</div>
<script>
function clickDiv() {
  alert("div");
}
function clickP() {
  alert("p");
  return false;
}
</script>
</body>
</html>

Vue防止事件冒泡解决方案：

<div @click="clickDiv">
    <button @click="clickButton"></button>
</div>

clickDiv = () => {
    alert("div");
},
clickButton = (event) => {
    alert("button");
    event.stopPropagation();
},

或者：

<div @click="clickDiv">
    <button @click.stop="clickButton"></button>
</div>

clickDiv = () => {
    alert("div");
},
clickButton = (event) => {
    alert("button");
},

// 也可以同时串联其他修饰，比如：
@click.stop.prevent=”clickHere“

React防止事件冒泡解决方案：

<div onClick={clickDiv}>
    <button onClick={clickButton}></button>
</div>

const clickDiv = () => {
    alert("div");
}

const clickButton = (event) => {
    alert("button");
    event.stopPropagation();
}

. . .

相关推荐

额外说明

Redis(3)——字符串类型操作

目录 获取所有设置的key(keys *) 清空数据(flushdb) 设置操作数据(set) 获取操作数据(get) 不覆盖设置(setnx) 设置数据有效期(setex) 查看定时数据所剩时间(ttl) 取消有效时间内的数据，并转化为永久存储(per

额外说明

Oracle中游标的基本用法详解

这篇文章主要介绍了Oracle中游标Cursor基本用法详解，还是比较全面的，具有一定参考价值，需要的朋友可以了解下。 查询 　　SELECT语句用于从数据库中查询数据，当在PL/SQL中使用SELECT语句时，要与INTO子句一起使用，查询的 返回值被

额外说明

自动生成sql和实体类接口——基于mybatis逆向工程

基于mybatis逆向工程生成对应数据库表的sql语句，接口以及实体类 首先需要创建一个maven项目pom需要引入三个依赖 <dependency> <groupId>org.mybatis</groupId> <art

额外说明

idea中git代码回滚

第一步:找到VCS->Git->Show History 第二步:右键复制版本号: 第三步:找到 Git->Reset HEAD: Reset Type 有三种： mixed 默认方式，只保留源码，回退commit和index信息 soft 回退到某个版

额外说明

PostgreSQL 数据库限制

PostgreSQL 数据库存在一些大小和数量的硬性限制。 不过，这些限制通常足够大，因此实际情况往往是系统性能、磁盘空间首先出现问题。 项目 上限 备注 数据库大小 无限制 数据库数量 4,294,950,911 每个数据库中的关系数量 1,431,6

  • by horses
  • 收录于 200天前
额外说明

leetcode19（删除链表倒数第二个N节点）

题目：给定一个链表，删除链表的倒数第n个节点，并返回头结点。 题解：双指针法，定义两个指针first，second，first指向 head（为空的头结点） -->next，second指向head，随后只向前移动first指针，使first与secon

额外说明

Java 17 版本的新特性

Java 17 版本的新特性 -Sealed类 -Pattern Matching for instanceof - 垃圾回收器改进 -Vector API - Switch表达式的增强 -Sealed类的示例代码 - Pattern Matching

额外说明

Maven的profiles多环境配置

一个项目通常都会有多个不同的运行环境，例如开发环境，测试环境、生产环境等。而不同环境的构建过程很可能是不同的，例如数据源配置、插件、以及依赖的版本等。每次将项目部署到不同的环境时，都需要修改相应的配置，这样重复的工作，不仅浪费劳动力，还容易出错。为了解决

额外说明

【100个 Unity实用技能】☀️ | Unity中检测 设备麦克风权限

Unity 小科普 老规矩，先介绍一下 Unity 的科普小知识： Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者，借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方

额外说明

【NLP】学不会打我 半小时学会基本操作 14 文本处理 ＜PAD＞＜EOS＞＜UNK＞＜GO＞

【NLP】⚠️学不会打我! 半小时学会基本操作 14⚠️ 文本处理 概述 文本处理 概述 从今天开始我们将开启一段自然语言处理 (NLP) 的旅程. 自然语言处理可以让来处理, 理解, 以及运用人类的语言, 实现机器语言和人类语言之间的沟通桥梁. 文本处

最新推荐

vue中获取dom元素
200天前
浏览器窗口切换激活事件visibilit...
200天前
python实例100第7例
200天前
力扣42. 接雨水 （java）
199天前
Eclipse+Maven+Tomcat...
196天前
Spring框架学习笔记04：初探Spr...
196天前
Mask_RCNN项目下载、配置、运行保...
196天前
cookie Expires的作用。
196天前
Java数据库篇7——数据库设计
193天前
WordPress 5.2的新功能（功能...
188天前
ads via 小工具