react阻止事件冒泡（vue阻止冒泡和默认事件）

周桂香优秀作者

原创内容来源：小居数码网时间：2024-08-10 19:41:03 阅读() 收藏：46 分享：78 爆

导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有1670个文字，大小约为6KB，预计阅读时间5分钟。

JS阻止事件冒泡及阻止默认事件解决方案：

vue阻止冒泡和默认事件

1、event.preventDefault —— 阻止默认

Event 接口的 preventDefault()方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或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><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 —— 下阻止冒泡

Event 接口的 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 —— 上阻止冒泡

阻止捕获和冒泡阶段中当前事件的进一步传播。

但是，它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。

如果要停止这些行为，请参见 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>  <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只会触发preventDefault()，因此只有在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();}

上面就是小居数码小编今天给大家介绍的关于（vue阻止冒泡和默认事件）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

（516）个朋友认为回复得到帮助。

部分文章信息来源于以及网友投稿，转载请说明出处。

本文标题：react阻止事件冒泡（vue阻止冒泡和默认事件）：http://sjzlt.cn/shuma/154480.html

上一篇：常用的mos管驱动芯片有哪些（mos管的驱动电路）

下一篇：js下拉列表（表单中可以产生下拉列表的标签）