需求：
某个div上绑定了点击事件，在不点击button按钮的时候，div处于禁用状态（即点击事件不可触发），只有点击了button这个div才解除禁用状态。
思路：
在button点击前给div一个disabled的状态，点击后把disaled状态去掉。如果是input可以直接使用disabled属性，但是div没有这样的属性，只能另辟蹊径。
解决办法：
使用css属性
pointer-events:none;
来控制div的禁用状态。
pointer-events
指定在什么情况下元素可以成为鼠标事件的 target，当值为
none
时元素永远不会成为鼠标事件的target。但是，当其后代元素的
pointer-events
属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
示例代码：
style:
.disabledDiv{
pointer-events: none;
background-color: #F5F7FA;
template:
<div class="box"
:class="!editable?'disabledDiv':''"
@click="doSth">
<button @click="changeState">
</button>
script:
data(){
return{
editable:false
methods:{
changeState(){
this.editable = true;
doSth(){
......
需求：某个div上绑定了点击事件，在不点击button按钮的时候，div处于禁用状态（即点击事件不可触发），只有点击了button这个div才解除禁用状态。思路：在button点击前给div一个disabled的状态，点击后把disaled状态去掉。如果是input可以直接使用disabled属性，但是div没有这样的属性，只能另辟蹊径。解决办法：使用css属性pointer-event...
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events:
当按钮是用
div写的时候，不能够像button一样直接
使用disabled属性，此时可以通过
事件
禁用样式
pointer-
events: none; 和 鼠标悬浮
禁用手势样式 cursor: not-allowed; 来实现类似button按钮disabled属性效果；
但是如果把这两个样式写在一个class里面，事件
禁用样式会影响鼠标悬浮
禁用手势样式，使得
禁用状态无法显示。
解决：将 cursor: not-allowed 写在外层
div上
<
div class="A">
div禁用——添加样式style={pointer-events: none;}
1、根据当前项目的场景，在特定条件下时，该div禁用，不可点击，先在HTML内给此标签新加一个类名
2、写好不可点击的样式
3、在特定逻辑下，加入新类名
$(".原类名").addClass(“新类名”);
一个div盒子，里面特别多内容，现在要禁用div里的所有内容，一般人的想法就是，加个遮罩盒子不就好了吗，开始我也是这样想的，后来发现一个更简单的方法，那就是给这个div加禁止点击事件样式。加上以后，这个盒子里的所有内容都不可以点了，通过这个div样式来控制div是否禁止。
// 通过标的allKfLine来控制样式，通过三元控制样式是否显示
<el-button-group class="allBtn">
<el-button size="mini" @click
如果在前端页面中想让某个div元素处于禁用的状态，通过style中设置pointer-events: none;属性即可生效
style行内样式：
style="pointer-events: none;"
jq实现禁用div：
//禁用
$.fn.disable = function () {
$(this).addClass("disable");
$.fn.enable = function () {
$(this).removeClass("disable");
div禁用——添加样式style={
pointer-
events: none;}
1、根据当前项目的场景，在特定条件下时，该
div禁用，不可点击，先在HTML内给此标签新加一个类名
2、写好不可点击的样式
3、在特定逻辑下，加入新类名
$(".原类名").addClass("新类名");
其实早知道这个属性，但是一直没有去研究过。今天正好在twitter看到这个词，就去研究了下，正好解决了目前遇到的一个小难题，所以分享下。嗯，其实这是个比较简单的CSS3属性。
在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的div或者其它元素一般都会给个宽高，或者relative的元素可以不给宽高，这个时候，这些元素就会...
在项目中遇到了对于 List 数据的部分禁用问题
首先我们在写 List 的时候会先定义或者是从后台获取数据,但是很少会用到只使用部分数据
这里我们可以对标签定义一个类名(class),在style里面对类名进行定义
.类名 {
pointer-events: none // 禁用
对于数据较多的时候,我们可以直接使用标签来定义
div:nth-child(2) {
pointer-events: none // 禁用
这里 nth-child() 括号里面是第几个,但是也可能会作用到
- auto：默认值，
元素响应鼠标事件。
- none：
元素不响应鼠标事件，鼠标事件穿透到下面的
元素。
- visiblePainted：
元素不响应鼠标事件，但是鼠标事件不会穿透到下面的
元素。
- visibleFill：
元素不响应鼠标事件，但是鼠标事件不会穿透到下面的
元素。
- visibleStroke：
元素不响应鼠标事件，但是鼠标事件不会穿透到下面的
元素。
- painted：
元素不响应鼠标事件，但是鼠标事件不会穿透到下面的
元素。
- fill：
元素不响应鼠标事件，但是鼠标事件不会穿透到下面的
元素。
- stroke：
元素不响应鼠标事件，但是鼠标事件不会穿透到下面的
元素。
