JS阻止事件冒泡和默認事件

時間 2019-11-17

原文原文鏈接

什麼是事件冒泡？

當事件發生後，這個事件就要開始傳播（從裏到外，或者從外向裏）。爲何要傳播呢？由於事件源自己（可能）並無處理事件的能力，或處理事件的函數並未綁定在該事件源上。以下圖：html

咱們常常利用事件冒泡機制去減小給DOM添加過多的綁定事件即事件委託，可是有時候事件冒泡也會比較煩人，影響咱們的事件正常處理機制，以下：瀏覽器

<body>
<div id="info">
  <div class="box-1" onclick="box1()">
    最外層
    <div class="box-2" onclick="box2()">
      第二層
      <div class="box-3" onclick="box3()">
        第三層
        <div class="box-4" onclick="bubbles()">最底</div>
      </div>
    </div>
  </div>
</div>
<script>
  function bubbles(){
    console.log("最底層盒子被點擊了")
  }

  function box1(){
    console.log("最外層盒子被點擊了");
  }

  function box2(){
    console.log("第二個盒子被點擊了");
  }

  function box3(){
    console.log("第三個盒子被點擊了");
  }
</script>
</body>複製代碼

如何阻止事件冒泡？

由上圖咱們能夠看出，咱們只點擊了最裏面的那個div，可是在他的父級及以上div身上所綁定的事件都被觸發了，這顯然不是咱們想要的結果，咱們實際需求是隻想要觸發點擊的那個div上綁定的事件，咱們該如何阻止瀏覽器的這種事件處理機制呢？bash

function bubbles(e){
  var ev = e || window.event;
  if(ev && ev.stopPropagation) {
    //非IE瀏覽器
    ev.stopPropagation();
  } else {
    //IE瀏覽器(IE11如下)
    ev.cancelBubble = true;
  }
  console.log("最底層盒子被點擊了")
}複製代碼

這樣咱們就能夠實現點擊哪一個div觸發哪一個div的方法，而對其餘div不形成影響了函數

阻止默認事件

一共有以下三種方式：ui

//谷歌及IE8以上
e.preventDefault();
//IE8及如下
window.event.returnValue = false;
//無兼容問題（但不能用於節點直接onclick綁定函數）
return false;複製代碼

具體用法：spa

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>阻止默認事件</title>
</head>
<body>
<div id="info">
  <a href="www.baidu.com" id="test">阻止默認事件</a>
</div>
<script>
  var aDom = document.getElementById('test');
  aDom.onclick = function ( e ){
    if(e && e.preventDefault) {
      //非IE瀏覽器
      e.preventDefault();
    } else {
      //IE瀏覽器(IE11如下)
      window.event.returnValue = false;
    }
    //return false;   //或者不寫上面的判斷直接寫這句
  };
</script>
</body>
</html>複製代碼

使用return false的注意點scala

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>阻止默認事件</title>
</head>
<body>
<div id="info">
  <a href="www.baidu.com" onclick="defaultEvent()">阻止默認事件</a>
</div>
<script>
  function defaultEvent(){
    return false;
  }
</script>
</body>
</html>複製代碼

以上代碼，徹底無效，沒法經過這個函數阻止a標籤的跳轉，return false不能適用於直接用onclick綁定的事件，因此當咱們使用這種綁定事件方式時，咱們仍是須要採用e.preventDefault()這個函數code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。