IE的CSS“指针事件”属性替代

我有一个下拉导航菜单，其中某些标题在单击时不应导航到其他页面（单击时这些标题会打开一个下拉菜单），而其他标题应在导航中（这些都没有下拉菜单并直接导航）。类型已经href定义给他们

为了解决这个问题，我为标题的前一种类型添加了以下CSS

pointer-events: none;

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

有任何想法吗？

Pointer-events是Mozilla的一种黑客手段，已经在Webkit浏览器中实现了，您不能指望在IE浏览器中再看到它一百万年了。

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

通过层转发鼠标事件

它使用一个插件，该插件使用Javascript的一些不为所知/理解的属性来获取鼠标事件并将其发送到另一个元素。

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

2013年10月的更新：显然，它将在v11中加入IE。来源。谢谢蒂姆。

这是另一个很容易用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;

});

IE有一种解决方法-使用内联SVG并在SVG中设置pointer-events =“ none”。请参阅如何使Internet Explorer模拟指针事件：无？

值得一提的是，专门用于IE disabled=disabled的锚标签适用于：

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

IE将其视为disabled元素，并且不会触发click事件。但是，disabled不是锚标记上的有效属性。因此，这在其他浏览器中将不起作用。pointer-events:none在样式中需要它们。

更新1：所以添加以下规则感觉就像一个跨浏览器的解决方案，我

更新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"

这是一个实现此功能的小脚本（灵感来自Kyle提到的Shea Frederick博客文章）：

• 指针事件Polyfill。

使用伪元素用不可见的块覆盖有问题的元素：:before或:after

a:before {
//IE No click hack by covering the element.
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  content:' ';
}

因此，您单击的是父元素。如果父级是可单击的，则没有好处，否则效果很好。

我花了将近两天的时间找到解决该问题的方法，终于找到了。

这使用javascript和jquery。

（GitHub）pointer_events_polyfill

这可以使用javascript插件进行下载/复制。只需从该站点复制/下载代码并将其另存为pointer_events_polyfill.js。将该JavaScript包含到您的网站中。

<script src="JS/pointer_events_polyfill.js></script>

将此jQuery脚本添加到您的网站

$(document).ready(function(){
    PointerEventsPolyfill.initialize({});
});

并且不要忘记包括您的jquery插件。

有用！我可以单击透明元素下的元素。我正在使用IE10。我希望这也可以在IE 9及以下版本中使用。

编辑：单击透明元素下方的文本框时，使用此解决方案不起作用。为了解决此问题，当用户单击文本框时，我将使用焦点。

Javascript：

document.getElementById("theTextbox").focus();

jQuery的：

$("#theTextbox").focus();

这使您可以在文本框中键入文本。

我找到了另一个解决此问题的方法。如果浏览器窗口宽度大于1'000px，则使用jQuery将href-attribute 设置为javascript:;（而不是'，否则浏览器将重新加载页面）。您需要在链接中添加一个ID。这是我在做什么：

// get current browser width
var width = $(window).width();
if (width >= 1001) {

    // refer link to nothing
    $("a#linkID").attr('href', 'javascript:;'); 
}

也许对您有用。

用 OnClientClick = "return false;"

您也可以只在<a>标签内“不”添加网址，我也对<a>带有下拉菜单的标签驱动菜单执行此操作。如果没有下拉列表，那么我添加网址，但是如果有带有<ul> <li>列表的下拉列表，我就将其删除。

我遇到了类似的问题：

1. 我在指令中遇到了这个问题，我修复了这个问题，将其添加为父元素并进行了指针事件：无

2. 上面的修复不适用于select标签，然后我添加了cursor：text（这是我想要的），并且对我有用

如果需要普通光标，则可以添加cursor：default

最佳解决方案：

.disabled{filter: alpha(opacity=50);opacity: 0.5;z-index: 1;pointer-events: none;}

在所有浏览器上完美运行