How can I emulate `pointer-events: none` in Internet Explorer for non-SVG elements?

Emulating pointer-events:none in Internet Explorer

Internet Explorer poses a challenge when using the pointer-events:none CSS property to allow user interaction with layered elements. This property, used to disregard mouse events for specific elements, is only recognized by IE for SVG elements.

Overcoming the Limitation

Despite this limitation, IE does offer an alternative solution. By wrapping existing elements in an SVG element, you can retain the desired functionality. jQuery's wrap method can simplify this process.

Example

Suppose you wish to cover a chart with a PNG gradient and retain chart interactivity. You can implement this using the following code:

**CSS:**

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

**HTML:**

<svg>

Accessing Overlying and Underlying Objects

If you need to interact with elements underneath the SVG overlay, consider using the document.msElementsFromPoint method in IE. This method provides an array of all layers on a specified point.

Conclusion

While pointer-events:none is not natively supported in IE, using SVG elements and the document.msElementsFromPoint method provides a comprehensive solution, enabling users to interact with charts and maintain an enhanced design.

The above is the detailed content of How can I emulate `pointer-events: none` in Internet Explorer for non-SVG elements?. For more information, please follow other related articles on the PHP Chinese website!