JS、Vue、React阻止事件冒泡及阻止默认事件_react 阻止默认行为

作者：weixin_40725706 | 2024-02-13 02:19:12

踩

react 阻止默认行为

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

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();
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/79395