js 点击事件如何触发上下层的事件？

  • Z时代
  • 2024-02-06
  • 分类：IT

js 点击事件如何触发上下层的事件？

  <style>
    #a{
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #b{
      width: 100px;
      height: 100px;
      background-color: gainsboro;
      position: absolute;
      top: 50px;
      left: 50px;
      pointer-events: none;
    }
  </style>
<body>
  <div id="a">1111111111</div>
  <div id="b">222222222</div>
</body>
</html>
<script>
  document.getElementById('a').addEventListener('click',()=>{
    console.log('a');
  })
  document.getElementById('b').onclick = () => {
    console.log('b');
  }
</script>

当点击b盒子触发b的事件，但是a的事件触发不了，如何使两个盒子都触发呢。

回答：

将b放在子级

  <style>
    #a{
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    #b{
      width: 100px;
      height: 100px;
      background-color: gainsboro;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
<body>
  <div id="a">1111111111  <div id="b">222222222</div></div>
</body>
</html>
<script>
  document.getElementById('a').addEventListener('click',()=>{
    console.log('a');
  })
  document.getElementById('b').onclick = () => {
    console.log('b');
  }
</script>

回答：

设置了 pointer-events: none; 的原因吧。

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
当为 none 时，元素永远不会成为鼠标事件的 target。

参考
https://developer.mozilla.org...
https://www.w3school.com.cn/c...

回答：

js手动触发

 document.getElementById('a').addEventListener('click', () => {
      console.log('a')
      document.getElementById('b').click()
    })
    document.getElementById('b').onclick = () => {
      console.log('b')
    }

以上是 js 点击事件如何触发上下层的事件？ 的全部内容， 来源链接： utcz.com/p/936093.html

回到顶部