父元素用了伪类active的样式后，其子元素的点击事件onclick无法触发？

Question

父元素用了伪类active的样式后，其子元素的点击事件onclick无法触发？

发布于
2021-08-31

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>


  
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .search_engine{
      width: 80px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: lightskyblue;
    }
    ul{
      list-style: none;
    }
    li{
      height: 50px;
    }
    .search_engine .select_search_engine{
      display: none;
      background-color: lightskyblue;
    }
    .search_engine:hover .select_search_engine{
      display: block;
    }

  
    /* 问题 */
    /* 父元素加了active伪类后子元素的onclick失效 */
    /* 只要加上这行css，click事件就用不了，为什么 */
    /* ul.select_search_engine加上 :active 后 li 的 click 就用不了，怎么办， */
    .search_engine .select_search_engine:active {
      display: none;
    }

    .search_engine .select_search_engine li:hover{
      background-color: #317ef3;
      color: white;
    }
  </style>

  <div class="search_engine">
    <div class="this_s">百度</div>
    <ul class="select_search_engine">
      <li class="baidu_s">百度</li>
      <li class="bing_s">必应</li>
      <li class="google_s">谷歌</li>
    </ul>
  </div>

  <script>
    let baidu_s = document.querySelector(".search_engine .select_search_engine .baidu_s");
    let bing_s = document.querySelector(".search_engine .select_search_engine .bing_s");
    let google_s = document.querySelector(".search_engine .select_search_engine .google_s");
    let this_s = document.querySelector(".search_engine .this_s");
    baidu_s.addEventListener("click", function () {
      this_s.innerText = "百度"
    }, false);
    bing_s.addEventListener("click",function(){
      debugger;
      // 进不来
      this_s.innerText = "必应"
    },false);
    google_s.addEventListener("click",function(){
      this_s.innerText = "谷歌"
    },false);
  </script>


</body>

</html>

前端 html css javascript

阅读 4.1k

1 个回答

得票最新

PPxs199

7881320

发布于
2021-08-31

✓ 已被采纳

这问题挺有意思的，我查了一下:active的详细意思，CSS :active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。，所以你加了display:none样式，会让click事件无法构成（click由一次鼠标按下以及一次提起组合，而现在的目标对象会在该过程消失掉，无法捕获），改成mousedown就可以了

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

父元素用了伪类active的样式后，其子元素的点击事件onclick无法触发？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？