欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css屬性pointer-events實現(xiàn)點擊穿透的示例代碼

  發(fā)布時間：2023-07-19 16:21:45   作者： 彭世瑜   我要評論
本文主要介紹了css屬性pointer-events實現(xiàn)點擊穿透的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

pointer-events文檔

pointer-events CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標(biāo)事件的 target

常用屬性

/* Keyword values */
pointer-events: auto; /* 與pointer-events屬性未指定時的表現(xiàn)效果相同 */
pointer-events: none; /* 元素永遠不會成為鼠標(biāo)事件的target */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

案例一

看一段 css 和 js 代碼，由里到外嵌套

<style>
      .box-green {
        width: 800px;
        height: 300px;
        background-color: green;
      }
      .box-yellow {
        width: 500px;
        height: 250px;
        background-color: yellow;
      }
      .box-red {
        width: 300px;
        height: 200px;
        background-color: red;
      }
    </style>
    <div
      class="box-green"
      id="box-green"
    >
      <div
        class="box-yellow"
        id="box-yellow"
      >
        <div
          class="box-red"
          id="box-red"
        ></div>
      </div>
    </div>
    <script>
      let boxGreen = document.querySelector('#box-green')
      let boxYellow = document.querySelector('#box-yellow')
      let boxRed = document.querySelector('#box-red')
      boxGreen.addEventListener('click', function () {
        console.log('boxGreen click')
      })
      boxYellow.addEventListener('click', function () {
        console.log('boxYellow click')
      })
      boxRed.addEventListener('click', function () {
        console.log('boxRed click')
      })
    </script>

點擊紅色部分 事件觸發(fā)順序

boxRed click
boxYellow click
boxGreen click

點擊黃色部分 事件觸發(fā)順序

boxYellow click
boxGreen click

點擊綠色部分 事件觸發(fā)順序

boxGreen click

案例二

修改一下布局，外層相對定位，內(nèi)層絕對定位

<style>
      .box-green {
        width: 800px;
        height: 300px;
        background-color: green;
        position: relative;
      }
      .box-yellow {
        position: absolute;
        left: 0;
        width: 300px;
        height: 250px;
        background-color: yellow;
      }
      .box-red {
        position: absolute;
        right: 0;
        width: 300px;
        height: 250px;
        background-color: red;
      }
    </style>
    <div
      class="box-green"
      id="box-green"
    >
      <div
        class="box-yellow"
        id="box-yellow"
      ></div>
      <div
        class="box-red"
        id="box-red"
      ></div>
    </div>
    <script>
      let boxGreen = document.querySelector('#box-green')
      let boxYellow = document.querySelector('#box-yellow')
      let boxRed = document.querySelector('#box-red')
      boxGreen.addEventListener('click', function () {
        console.log('boxGreen click')
      })
      boxYellow.addEventListener('click', function () {
        console.log('boxYellow click')
      })
      boxRed.addEventListener('click', function () {
        console.log('boxRed click')
      })
    </script>

點擊綠色部分 事件觸發(fā)順序

boxGreen click

點擊黃色部分 事件觸發(fā)順序

boxYellow click
boxGreen click

點擊紅色部分 事件觸發(fā)順序

boxRed click
boxGreen click

如果設(shè)置css屬性

.box-red {
  position: absolute;
  right: 0;
  width: 300px;
  height: 250px;
  background-color: red;
  /* 取消鼠標(biāo)事件 */
  pointer-events: none;
}

點擊紅色區(qū)域，只會觸發(fā)如下事件，實現(xiàn)了穿透效果

boxGreen click

參考

css 點擊穿透 pointer-events: none；一般用于遮罩

到此這篇關(guān)于css屬性pointer-events實現(xiàn)點擊穿透的示例代碼的文章就介紹到這了,更多相關(guān)css pointer-events點擊穿透內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論