css3之pointer-events

来源：互联网发布：爱易编程工具箱编辑：程序博客网时间：2024/06/05 16:41

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