Question

我有一个下拉导航菜单，其中一些标题在点击时不应导航到其他页面（这些标题在点击时打开一个下拉菜单），而其他标题应该导航（这些没有下拉列表并直接导航）。但是，这两种类型都定义了href

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

pointer-events: none;

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

有什么想法吗？

Answer 1

Pointer-events是一个Mozilla hack，它已经在Webkit浏览器中实现，你不能指望在IE浏览器中再看一百万年。

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

Forwarding Mouse Events Through Layers

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

还有另一个Javascript解决方案here。

2013年10月更新：显然它将在第11版进入IE。 Source。谢谢蒂姆。

Answer 2

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

捕获顶部元素（要关闭指针事件的元素）的'mousedown'事件。
在'mousedown'中隐藏顶部元素。
使用'document.elementFromPoint（）'获取基础元素。
取消隐藏顶部元素。
为基础元素执行所需的事件。

示例：

//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并设置指针事件=“无”。请参阅How to make Internet Explorer emulate pointer-events:none?

中的答案

Answer 4

值得一提的是，专门针对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"

呈现的

Answer 5

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

Pointer Events Polyfill。

Answer 6

我花了差不多两天时间找到解决这个问题的方法，最后我发现了这个问题。

这使用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插件。

有效！我可以点击透明元素下的元素。我正在使用IE 10.我希望这也适用于IE 9及以下版本。

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

使用Javascript：

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

JQuery的：

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

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

Answer 7

使用伪元素：:before或:after

使用隐藏块覆盖有问题的元素

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

因此，您可以点击父元素上的土地。没有好处，如果父母是可点击的，但是效果不错。

Answer 8

我找到了另一种解决方案来解决这个问题。如果浏览器窗口宽度大于1'000px，我使用jQuery将href - 属性设置为javascript:;（不是''，或浏览器将重新加载页面）。您需要在链接中添加ID。这就是我正在做的事情：

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

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

也许它对你有用。

Answer 9

使用OnClientClick = "return false;"

Answer 10

你也可以＆＃34;不是＆＃34;在@Bean public RouteLocator routeLocator(RouteLocatorBuilder builder) { String test = "http://localhost:4178"; return builder.routes() .route("integration-test", r -> r .path("/integration/sbl/**") .filters(f->f.rewritePath("/integration/(?<segment>.*)","/a-integration/${segment}")) .uri(test) ) .build(); }标记内添加网址，我这样做的菜单也是<a>标记驱动的下拉菜单。如果没有下拉，那么我添加网址，但如果有<a>列表的下拉列表，我只需删除它。

Answer 11

我遇到了类似的问题：

我在一个指令中面对这个问题，我修复了它添加一个作为其父元素并制作指针事件：无为
以上修复程序对select标签不起作用，然后我添加了 cursor：text （这就是我想要的）并且它对我有用

如果需要普通光标，您可以添加光标：默认

Answer 12

最佳解决方案：

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

在所有浏览器上完美运行

css＆＃39;指针事件＆＃39; IE的财产替代品

12 个答案: