IE的"指针 - 事件"属性替代方案

Question

我有一个下拉导航菜单,其中一些标题在点击时不应导航到其他页面(这些标题在点击时打开一个下拉菜单),而其他标题应该导航(这些没有下拉列表并直接导航).但是,两者都是类型已经href定义了它们

为了解决这个问题,我为前一类标题添加了以下css

pointer-events: none;

它工作正常.但由于IE不支持此属性,我正在寻找一些解决方法.令人讨厌的是,我没有访问权限和完全更改HTML和JavaScript代码的权限.

有任何想法吗？

Answer 1

Pointer-events是一个Mozilla hack,它已经在Webkit浏览器中实现,你不能指望在IE浏览器中看到它已经有一百万年了.

但是我找到了一个解决方案:

通过图层转发鼠标事件

这使用了一个插件,它使用一些不为人知的/已知的Javascript属性来获取鼠标事件并将其发送到另一个元素.

也有另一种JavaScript解决方案在这里.

2013年10月的更新:显然它将在第11版进入IE.来源.谢谢蒂姆.

Answer 2

这是另一个使用5行代码很容易实现的解决方案:

1. 捕获顶部元素(要关闭指针事件的元素)的"mousedown"事件.
2. 在'mousedown'隐藏顶部元素.
3. 使用'document.elementFromPoint()'获取底层元素.
4. 取消隐藏顶部元素.
5. 为底层元素执行所需的事件.

例:

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.TopElement', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

Answer 3

IE有一个解决方法 - 使用内联SVG并在SVG中设置指针事件="无".请参阅我的答案如何使Internet Explorer模拟指针事件:无？

Answer 4

值得一提的是,专门针对IE,disabled=disabled适用于锚标签:

<a href="contact.html" onclick="unleashTheDragon();" disabled="disabled">Contact</a>

IE将此视为disabled元素,不会触发click事件.但是,disabled它不是锚标记的有效属性.因此,这在其他浏览器中不起作用.对于他们pointer-events:none来说,在造型上是必需的.

更新1:所以添加以下规则对我来说就像是一个跨浏览器的解决方案

UPDATE 2:为了进一步兼容,因为IE不会为锚标签形成样式disabled='disabled',所以它们仍然看起来是活跃的.因此,a:hover{}规则和样式是一个好主意:

a[disabled="disabled"] {
        pointer-events: none; /* this is enough for non-IE browsers */
        color: darkgrey;      /* IE */
    }
        /* IE - disable hover effects */   
        a[disabled="disabled"]:hover {
            cursor:default;
            color: darkgrey;
            text-decoration:none;
        }

使用Chrome,IE11和IE8.
当然,上面的CSS假定使用锚标记进行渲染disabled="disabled"

Answer 5

这是一个实现此功能的小脚本(受到Kyle提到的Shea Frederick博客文章的启发):

• 指针事件Polyfill.