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