pointer-events: none；属性。pointer-events: none；看得见摸不着，点击穿透。

pointer-events: none;理解：你可以看的到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素
display：none; 是你摸不着，但是你也看不见。

最简单的使用场景是：给某个box1盒子设置样式和内容，然后定位遮住在另一个box2上，点击box1会触发点击box2的事件。

例如下方将蓝色盒子放在select的位置展示某值，选择所有时候展示颜色盒子。点击颜色区域需要打开下拉框。既可以用到pointer-events: none;

以下代码可以直接复制：

<!--* @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能
-->
<template><div style="padding: 300px 100px;"><el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="请选择菜单" clearable><el-checkbox v-model="checkedAll" @change="selectAll">全选</el-checkbox><el-option v-for="item in menuList" :key="item.id" :label="item.menuName" :value="item.id"></el-option></el-select><span v-if="checkedAll" class="pointer_box">点此会渗透到 点击select</span></div>
</template>
<script>
export default {data () {return {checkedAll: false,menus: [],menuList: [{ id: '01', menuName: '菜单一' },{ id: '02', menuName: '菜单二' },{ id: '03', menuName: '菜单三' },{ id: '04', menuName: '菜单四' },{ id: '05', menuName: '菜单五' },{ id: '06', menuName: '菜单六' },]}},mounted () {},methods: {// 点击下拉列表选项时触发changeSelectMenu (val) {if (val.length === this.menuList.length) {this.checkedAll = true} else {this.checkedAll = false}},// 点击“全选”按钮时触发selectAll () {this.menus = []if (this.checkedAll) {this.menuList.map(item => {this.menus.push(item.id)})} else {this.menus = []}}}
}
</script>
<style lang='less'>
.el-select-dropdown {.el-checkbox {display: inline-block;margin-left: 20px;padding: 8px 0;}
}.pointer_box {pointer-events: none;position: relative;display: inline-block;z-index: 999;left: -180px;top: 10px;width: 120px;background-color: #1fff;
}
</style>

pointer-events: none；属性。pointer-events: none；看得见摸不着，点击穿透。相关推荐

【前端点击穿透】pointer-events属性详解
什么是pointer-events? pointer-events 属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标. This CSS property,when se ...
css：css属性pointer-events实现点击穿透
文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events pointer-events CSS 属性指定在什么情况下 (如果 ...
HTML搜索框中加入提示文字,HTML 5 input placeholder 属性实现搜索框提示文字点击输入后消失 - 尚码园...
H5以前要实现这个功能还要用到JS,H5出来以后新增长了placeholder属性,有了这个属性就就能轻松实现这个功能.post 定义和用法 placeholder 属性提供可描述输入字段预期值的提示 ...
div点击穿透,CSS属性pointer-events :none;实现护眼模式, 夜间模式遮罩
.div-xx{ pointer-events :none;/*取消事件,点击穿透*/ } pointer-events , css属性值 auto--效果和没有定义pointer-events属性相 ...
css3属性：美化表单、点击元素产生的背景与边框怎么去掉，滚动回弹效果
转载于:https://www.cnblogs.com/pengchengzhong/p/6371351.html
把鼠标、触摸屏、触控笔统一起来，Pointer Events介绍
跨设备的问题平时我们在电脑上访问的网页,大部分情况下是用鼠标来控制的.比如说链接跳转,就是鼠标指针移动到链接文字或图片的位置,然后点击一下.又比如说滚动屏幕,滑动一下鼠标滚轮就可以. 如果是供手机访 ...
NodeJS Events模块源码学习
? events模块的运用贯穿整个Node.js, 读就Vans了. 1. 在使用层面有一个认识 1.1 Events模块用于解决那些问题? 回调函数模式让Node可以处理异步操作,但是,为了适应回调 ...
重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop...
重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 原文:重新想象 Window ...
将COM+ Events进行到底[转]
http://dev.csdn.net/article/14/14343.shtm 将COM+ Events进行到底(一)<?xml:namespace prefix = o ns = &quo ...

pointer-events: none；属性。pointer-events: none；看得见摸不着，点击穿透。

pointer-events: none；属性。pointer-events: none；看得见摸不着，点击穿透。相关推荐

最新文章

热门文章