当前位置：文江博客话题详情

JavaScript Vue.js 前端 ecmascript-6

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

发布于 2022-09-13 01:22:12 字数 691 浏览 17 评论 0

  <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的事件触发不了，如何使两个盒子都触发呢。

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

离旧人 2022-09-20 01:22:12

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

傲性难收 2022-09-20 01:22:12

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

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

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

久伴你 2022-09-20 01:22:12

js手动触发

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

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文