Microsoft Edge 中的 CSS 指针事件失败答案

【问题标题】：CSS pointer-events fails in Microsoft EdgeMicrosoft Edge 中的 CSS 指针事件失败
【发布时间】：2016-12-02 09:15:51
【问题描述】：

我的 Web 应用程序中有一个下拉菜单。此下拉列表是用户定义的（不使用 <select> 元素）。在这个下拉菜单中有一个向下箭头。这个箭头是通过在绝对定位的span 上使用背景图像创建的。这个span 标签正在阻止下拉菜单的点击事件。所以，我在span 标签中添加了pointer-events:none。添加后，它在任何地方都可以正常工作，但在 Edge 浏览器中。 Edge 是否支持pointer-event: none？如果不是，Edge 中pointer-event: none 的替代方案是什么。

下面是我使用的代码：

<div class="multi-dd" id="multi_dd_ddlProfession" role="application" cascadesto="ddlDiscipline">
    <input class="multi-dd-txt" id="txtProf" role="combobox" aria-readonly="false" aria-describedby="spMultiExit" style="width: 260px;" aria-label="Multi Select Control Professions " type="text" readonly="readonly" value="Select All">
    <span class="nir"></span>
</div>

.nir{
    height: 28px; 
    margin-left: -30px;
    vertical-align: bottom;
    overflow: hidden;
    pointer-events: none;
}

【问题讨论】：

caniuse.com/#search=pointer-events
您能否链接到或在您的帖子中提供该问题的工作演示？

标签： css debugging cross-browser microsoft-edge pointer-events

【解决方案1】：

有一些错误可能是根本原因：

FocusEvent 序列应该是：focusout、focusin、blur、focus。

FocusEvent 序列为：blur、focusout、focus、focusin。

和无重复测试：

#testID {pointer-events: none;}

<ul>
  <li><a href="https://developer.microsoft.com">MS Dev</a></li>
  <li id="testID"><a href="http://example.com">example.com</a></li>
</ul>

第一个版本的 Microsoft Edge 是在 Windows 10 Build 10049 中引入的。自 Windows 10 Build 10240 起就支持指针事件。

参考文献

【讨论】：