开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

为了元素在一定条件下可以禁用,有两种不同的禁用方式.pointer-events 和disabled.

disabled

当布尔属性 disabled 存在时，浏览器将禁用的表单控件显示为灰色，因为禁用的表单控件是不可改变的，不会收到焦点或任何浏览事件，如鼠标点击或与焦点相关的事件，也不会随表单提交。

如果所支持的元素上存在该属性，将匹配 :disabled 伪类。

<form>
    <label for="name">Name:</label>
    <input name="name" type="text"  disabled>
</form>

但是这种方式并不难阻止一些交互行为的发生,如带上原生的title:

<form>
    <label for="name">Name:</label>
    <input name="name" type="text"  title="这是一个disbaled的input元素" disabled>
</form>

同时这种方式只适用于表单元素,其它诸如div,span等不能使用,看下面的例子:

<div class="custom" contenteditable="true" disabled>  </div>

pointer-events

pointer-events 更像是JavaScript，它能够：

• 阻止用户的点击动作产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS里的 hover 和 active 状态的变化触发事件
• 阻止JavaScript点击动作触发的事件
• 通过其他方式绑定的事件还是会触发的，比如键盘事件等。

<a href="baidu.com" style="pointer-events:none">百度一下,你就知道</a>

这是一个超链接,按照正常来说,鼠标放上去应该是一个手型,但是当我们使用了pointer-events之后,鼠标再次放上去会变成箭头.

属性值

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;