css3之pointer-events

最新推荐文章于 2024-01-15 17:55:12 发布

萧逸才

最新推荐文章于 2024-01-15 17:55:12 发布

阅读量589

点赞数

分类专栏：前端 css3 文章标签： css3

本文链接：https://blog.csdn.net/xyc_csdn/article/details/71023704

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

在日常写代码的过程中我们可能遇到类似这样的一种需求，就是要求点击某个按钮后禁用整个页面，即整个页面的点击事件失效，或者要求局部点击事件失效，这时我们就可以使用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>

运行以上代码你会看到预期效果!

萧逸才

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3之pointer-events

在日常写代码的过程中我们可能遇到类似这样的一种需求，就是要求点击某个按钮后禁用整个页面，即整个页面的点击事件失效，或者要求局部点击事件失效，这时我们就可以使用css3的pointer-events属性了。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> ul{ float: le
复制链接

扫一扫