How to Emulate `pointer-events: none` in Internet Explorer?

Emulating Pointer-Events: none in Internet Explorer

In a project involving the enhancement of Highcharts, a need arose to display a gradient PNG over the charts. Utilizing the CSS property pointer-events: none would allow users to interact with the chart despite the overlaying div. However, this property is not recognized by Internet Explorer.

How to Enable Pointer-Event-Like Functionality in IE?

While pointer-events: none is not directly supported in Internet Explorer, the browser does support pointer events for SVG elements, as specified by the W3C. This means that you can use SVG elements to achieve similar functionality:

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

<svg>

With this approach, mouse events will pass through the SVG element to the underlying elements. You can further enhance this functionality by wrapping existing elements within an SVG using the jQuery wrap() method.

Alternative Solution for Accessing Overlying and Underlying Objects

If you need to access both overlying and underlying objects, you can utilize the document.msElementsFromPoint method available in IE. This method returns an array of all layers on a given point, enabling you to interact with both accessible elements.

The above is the detailed content of How to Emulate `pointer-events: none` in Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!