css3之pointer-events

最新推荐文章于 2025-08-14 11:10:02 发布

原创最新推荐文章于 2025-08-14 11:10:02 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

css3

5 篇文章

订阅专栏

本文通过一个实例展示了如何使用 CSS3 的 pointer-events 属性来实现点击禁用的效果。当点击特定菜单项时，页面大部分区域将无法响应点击事件，而指定区域仍保持交互功能。

在日常写代码的过程中我们可能遇到类似这样的一种需求，就是要求点击某个按钮后禁用整个页面，即整个页面的点击事件失效，或者要求局部点击事件失效，这时我们就可以使用css3的pointer-events属性了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      ul{
        float: left;
        border: 1px solid red;
      }
      ul li{
        cursor: pointer;
      }
      p{
        float: left;
        border: 1px solid yellow;
      }
    </style>
  </head>
  <body>
    <ul>
      <li onclick="show('菜单一');">菜单一</li>
      <li onclick="show('菜单二');">菜单二</li>
      <li onclick="show('菜单三');">菜单三</li>
      <li onclick="show('菜单四');">菜单四</li>
      <li onclick="show('菜单五');">菜单五</li>
    </ul>
    <p>
      点击菜单一、菜单二、菜单四和菜单五时都正常，但点击菜单三时除了P区域中的的代码可以成为鼠标事件的target，其它区域都无法点击.....
    </p>
  </body>
  <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
  <script type="text/javascript">
    function show(value){
        $("p").html(value+":<input value='"+value+"' />");
      if (value == "菜单三"){
        $("body").css("pointer-events", "none");  //元素永远不会成为鼠标事件的target。
        $("p").css("pointer-events", "auto"); //鼠标事件可以指向后代元素
      }
    }
  </script>
</html>