网站服务器的作用和功能有哪些,windows10云电脑,湖南网站推广电话,金华 网站建设通常表单控件都会有属性readonly、disabled对元素进行只读、禁用等操作。
而有时候我们想要div也达到类似效果#xff0c;可以用CSS样式pointer-events: none进行控制。
科普知识
CSS样式的pointer-events: none用于控制一个元素能否响应鼠标操作。当该属性设置为none时可以用CSS样式pointer-events: none进行控制。
科普知识
CSS样式的pointer-events: none用于控制一个元素能否响应鼠标操作。当该属性设置为none时当前元素及其子元素将无法与鼠标或触摸设备产生交互作用。鼠标点击、滑过、甚至移动都不会触发事件。
.disable{pointer-events : none;
}具体来说pointer-events: none;的效果如下
忽略鼠标操作对一个元素设置pointer-events: none;能让浏览器在处理鼠标操作时忽视掉这个元素的存在直接穿透到点击区域背后的元素上。不会触发事件意味着直接在这个元素上做鼠标操作时该元素上的鼠标效果不会被处理例如hover效果该元素上的鼠标事件不会被响应例如click、mousein、mousedown事件。
此外还有以下常见使用场景
实现视差滚动效果使滚动层无法响应交互实现粘性效果。实现遮罩层可以使下层元素无法响应事件产生遮蔽遮罩的效果。修复点击穿透问题在元素的子元素上设置防止点击事件穿透到父层元素上。改变鼠标事件的触发对象可以在一个元素上设置pointer-events: none;然后在它的子元素上绑定事件这样鼠标交互会直接在子元素上触发事件跳过中间元素。
JQuert版本设置样式控制
$(div[name××××]).css(pointer-events,none); // 设置div禁用
$(div[name××××]).css(pointer-events,); // 恢复div使用代码示例
!DOCTYPE html
htmlheadmeta charsetutf-8titleDIV模拟禁用/titlestylediv{width: 200px;height: 200px;background: pink;}.disable{pointer-events : none;}/style/headbodydiv classdisable onclickshow()/divscriptfunction show(){alert(我被点击啦!);}/script/body
/html效果展示
div盒子未加入 pointer-events : none;可以弹框显示 在div盒子加上类样式disable就无法弹框显示
