如何在 Internet Explorer 中針對非 SVG 元素模擬「pointer-events: none」？

在Internet Explorer 中模擬point-events:none

Internet Explorer 在使用point-events:none CSS 屬性允許時會帶來挑戰使用者與分層元素的互動。此屬性用於忽略特定元素的滑鼠事件，僅 IE 可以識別 SVG 元素。

克服限制

儘管有此限制，IE 確實提供了一個替代解決方案。將現有元素包裝在 SVG 元素中，您可以保留所需的功能。 jQuery 的 wrap 方法可以簡化此過程。

範例

假設您希望使用 PNG 漸層覆蓋圖表並保留圖表互動性。您可以使用以下程式碼來實現此操作：

**CSS:**

#tryToClickMe {
  pointer-events: none;
  width: 400px;
  height: 400px;
  background-color: red;
}

**HTML:**

<svg>

存取上層和下層物件

如果您需要與SVG 覆蓋層下方的元素進行交互，請考慮使用IE 中的document.msElementsFromPoint 方法。此方法提供指定點上所有圖層的陣列。

結論

雖然IE 中不原生支援pointer-events:none，但使用SVG 元素和document.msElementsFromPoint 方法提供了一個全面的解決方案，使用戶能夠與圖表互動並維護增強的設計。

以上是如何在 Internet Explorer 中針對非 SVG 元素模擬「pointer-events: none」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！