css ‘pointer-events’ 屬性替代 IE

問題描述

我有一個下拉導航選單，其中一些標題不應該導航到其他頁面，當點選 (這些標題開啟一個下拉選單，當點選)，而其他人應該導航 (這些沒有下拉式清單和直接導航) 。然而，兩者型別為它們定義了 href

為瞭解決這個問題，我為前一種型別的標題新增了以下 css

pointer-events: none;

並且它工作正常。但由於此屬性不被 IE 支援，我正在尋找一些 work-around 。令人討厭的是，我沒有訪問許可權，完全改變了 HTML 和 JavaScript 程式碼。

有任何想法嗎？

最佳解決方案

Pointer-events 是一個 Mozilla 駭客，它已經在 Webkit 瀏覽器中實現，您不能指望在 IE 瀏覽器中看到另外一百萬年。

然而，我找到了一個解決方案：

Forwarding Mouse Events Through Layers

這使用一個外掛，它使用一些不太瞭解/理解的 Javascript 屬性來取代滑鼠事件並將其傳送到另一個元素。

還有另一個 Javascript 解決方案 here 。

2013 年 10 月的更新：顯然是在 v11 中來到 IE 。 Source 。謝謝蒂姆

次佳解決方案

有一個解決方法為 IE – 使用內聯 SVG 並設定在 SVG 中的 pointer-events = “none” 。看到我的答案在 How to make Internet Explorer emulate pointer-events:none?

第三種解決方案

這是另一個解決方案，它使用 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;

});

第四種方案

值得一提的是，專門針對 IE，disabled=disabled 適用於錨標籤：

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

IE 將其視為 disabled 元素，不會觸發點選事件。但是，disabled 不是錨標籤上的有效屬性。因此，這在其他瀏覽器中不起作用。對於他們，pointer-events:none 在造型中是必需的。

更新 1：所以新增以下規則感覺像一個 cross-browser 解決方案給我更新 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 blog article)：

Pointer Events Polyfill 。

第六種方案

我花了差不多兩天找到解決這個問題的辦法，最後我發現了這個問題。

這使用 javascript 和 jquery 。

(GitHub) pointer_events_polyfill

這可以使用 javascript plug-in 進行下載/複製。只需複製/下載該站點的程式碼，並將其儲存為 pointer_events_polyfill.js 。將 javascript 包含到您的網站。

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

將此 jquery 指令碼新增到您的站點

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

並且不要忘記包括你的 jquery plug-in 。

有用！我可以點選透明元素下面的元素。我正在使用 IE 10. 我希望這也可以在 IE 9 及以下的工作。

編輯：當您單擊透明元素下方的文字框時，使用此解決方案不起作用。為瞭解決這個問題，當使用者點選文字框時，我使用焦點。

使用 Javascript：

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

JQuery 的：

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

這樣可以將文字輸入到文字框中。

第七種方案

用不可見塊覆蓋違規元素，使用偽元素：:before 或:after

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

因此，您點選父元素上的地址。沒有好處，如果父母是可點選，否則可以正常工作。

參考文獻

css ‘pointer-events’ property alternative for IE

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

css ‘pointer-events’ 屬性替代 IE