目錄

• 常用屬性
• 案例一
• 案例二
• 參考

pointer-events文檔

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

常用屬性

/* Keyword values */
pointer-events: auto; /* 與pointer-events屬性未指定時的表現效果相同 */
pointer-events: none; /* 元素永遠不會成為鼠標事件的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>
    <p
      class="5619-bb41-4f1b-1159 box-green"
      id="box-green"
    >
      <p
        class="bb41-4f1b-1159-e6b2 box-yellow"
        id="box-yellow"
      >
        <p
          class="4f1b-1159-e6b2-ed76 box-red"
          id="box-red"
        ></p>
      </p>
    </p>
    <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>

點擊紅色部分 事件觸發順序

boxRed click
boxYellow click
boxGreen click

點擊黃色部分 事件觸發順序

boxYellow click
boxGreen click

點擊綠色部分 事件觸發順序

boxGreen click

案例二

修改一下布局，外層相對定位，內層絕對定位

<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>
    <p
      class="7b6d-147f-8874-3ab8 box-green"
      id="box-green"
    >
      <p
        class="7962-655e-5619-bb41 box-yellow"
        id="box-yellow"
      ></p>
      <p
        class="655e-5619-bb41-4f1b box-red"
        id="box-red"
      ></p>
    </p>
    <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>

點擊綠色部分 事件觸發順序

boxGreen click

點擊黃色部分 事件觸發順序

boxYellow click
boxGreen click

點擊紅色部分 事件觸發順序

boxRed click
boxGreen click

如果設置css屬性

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

點擊紅色區域，只會觸發如下事件，實現了穿透效果

boxGreen click

參考

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

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

總結

以上是生活随笔為你收集整理的css属性pointer-events实现点击穿透的示例代码(Css属性大全)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。