css: css 属性のポインターイベントをクリックして浸透させる

書類

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

CSS の pointer-events プロパティは、特定のグラフィック要素がマウスイベントのターゲットになる可能性がある状況 (存在する場合) を指定します。

共通属性

/* 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>

    <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>

クリック红色部分イベントトリガーシーケンス

boxRed click
boxYellow click
boxGreen click

クリック黄色部分イベントトリガーシーケンス

boxYellow click
boxGreen click

クリック绿色部分イベントトリガーシーケンス

boxGreen click

ケース2

レイアウト、外側のレイヤーの相対的な配置、内側のレイヤーの絶対的な配置を変更します

<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>

クリック绿色部分イベントトリガーシーケンス

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 クリック スルー ポインター イベントを参照してください: なし; 通常はマスキングに使用されます