试下 CSS pointer-events 属性

在 FastAdmin 中，需要在上传时弹出新窗口选择分类及设置访问密码，这时你就需要用到 CSS pointer-events 属性。

参考代码：

因为是层叠关系，div 和 button 均有事件，因此造事件都被触发。

<div class="input-group-addon no-border no-padding upload-field" style="z-index: 10;cursor: pointer;">

    <button type="button" id="plupload-files_ids" data-dragdrop="false" style="pointer-events: none;" style="z-index: 0;">
        <i class="fa fa-upload"></i> 上传
    </button>

</div>

pointer-events 属性用于控制元素如何响应鼠标/触摸事件。

/* 关键值 */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* 仅 SVG */
pointer-events: visibleFill; /* 仅 SVG */
pointer-events: visibleStroke; /* 仅 SVG */
pointer-events: visible; /* 仅 SVG */
pointer-events: painted; /* 仅 SVG */
pointer-events: fill; /* 仅 SVG */
pointer-events: stroke; /* 仅 SVG */
pointer-events: all; /* 仅 SVG */

/* 全局 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

auto（默认值）
元素正常响应指针事件
事件会按常规冒泡传递

none
元素不响应任何指针事件
鼠标点击、悬停等事件会”穿透”该元素，作用于下层元素
元素本身的事件监听器不会触发

当使用 pointer-events 属性时，原有的点击一次响应2个事件，变成响应了1个事件。

了解，更多参见：

相关文章：