pointer-events 属性是前端开发中常用的属性之一，它通常用于指定某个元素是否可以接收鼠标或手势事件。然而，该属性在早期版本的 Internet Explorer 浏览器中并不支持，这对于开发者来说是一个巨大的问题。
本文将介绍如何使用一些技巧和代码来让 Internet Explorer 模拟 pointer-events:none 的效果，以便实现更好的浏览器兼容性。
使用事件捕获模拟 pointer-events:none
Internet Explorer 中没有 pointer-events 属性，但是可以通过事件捕获来模拟该属性。具体做法是在目标元素上添加一个透明的遮罩层，然后设置该遮罩层的 pointer-events 为 none，这样就能够阻止目标元素接收事件了。
以下是示例代码：
-- -------------------- ---- -------
-------
------- -
------ ------
------- ------
----------------- ----
-
----- -
--------- ---------
---- --
----- --
------ -----
------- -----
--------------- ----- -- ----- --
-
--------
---- ---------------
-----
---- ------------------- ---- --- ---
------
--------
--- ------ - ----------------------------------
-------------------------------- ---------- -
-------------------
---
---------在上面的代码中，我们首先定义了一个 .target 类型的元素，并为其添加了一个红色背景。然后，在该元素内部添加了一个 .mask 类型的元素，用来模拟 pointer-events:none 的效果。
最后，我们通过 JavaScript 为 .target 元素添加了一个 click 事件监听器，当用户点击该元素时，会弹出一个提示框。
请注意，由于遮罩层的存在，用户无法直接点击 .target 元素，因此也就无法触发 click 事件。这正是我们想要的效果。
使用 JS 库模拟 pointer-events:none
除了使用事件捕获之外，还可以使用一些 JavaScript 库来模拟 pointer-events:none 的效果，例如 PointerEventsPolyfill 和 Touchy 等等。
这些库通常会封装一些 DOM API，以便让开发者能够更方便地操作事件流，从而实现对 pointer-events 的模拟。但是，请注意，这种方式可能会引入一些额外的性能问题和兼容性问题，因此在使用时需要谨慎。
总结
本文介绍了如何利用事件捕获和 JavaScript 库来模拟 pointer-events:none 的效果，以便在 Internet Explorer 中实现更好的浏览器兼容性。虽然这种方式可能比较复杂，但它确实是一种有效的解决方案，值得我们掌握和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25911