如何让 Internet Explorer 模拟指针事件：无？

Posted 2023-03-06

【中文标题】如何让 Internet Explorer 模拟指针事件：无？

【英文标题】：How to make Internet Explorer emulate pointer-events:none?

【发布时间】：2012-03-12 05:09:54

【问题描述】：

我正在开展一个项目，我们通过在图表上显示渐变 PNG 来增强 highcharts。我们使用 CSS pointer-events:none; 来允许用户与图表交互，尽管顶部有一个 div 分层。 IE 无法识别pointer-events:none;，因此 IE 上的用户要么无法增强图表设计，要么无法与图表交互。我正在寻找一种方法让 IE 允许鼠标事件（特别是悬停事件）通过 div 传递到它下面的元素。

您可以在此处查看我们正在使用的模型：http://jsfiddle.net/PFKEM/2/

有没有办法让 IE 执行类似 pointer events:none; 之类的操作，鼠标事件通过一个元素传递到另一个元素？

【参考方案1】：

CSS：

#red_silk  
  width:100%;
  background: url('../img/red_silk.png') no-repeat center top;
  height:393px;
  z-index: 2; 
  position: absolute; 
  pointer-events: none; 

旧 HTML：

<div id="red_silk"></div>

新的 HTML：

<svg id="red_silk"></svg>

【参考方案2】：

添加以下 CSS 将禁用 ms 指针。

#container
    -ms-touch-action: none;

【参考方案3】：

$.fn.passThrough = function (target) 
    var $target = $(target);
    return this.each(function () 
        var style = this.style;
        if ('pointerEvents' in style) 
            style.pointerEvents = style.userSelect = style.touchCallout = 'none';
         else 
            $(this).on('click tap mousedown mouseup mouseenter mouseleave', function (e) 
                $target.each(function() 
                    var rect = this.getBoundingClientRect();
                    if (e.pageX > rect.left && e.pageX < rect.right &&
                        e.pageY > rect.top && e.pageY < rect.bottom)
                        $(this).trigger(e.type);
                );
            );
        
    );
;

http://jsfiddle.net/yckart/BQw4U/

$('.overlay').passThrough('.box');
$('.box').click(function()
    $(this).toggleClass('active');
);

【讨论】：

一些警告，如果有人要实际实施这个解决方案（经过几次修复），他应该用 jquery 的 position() 替换 getBoundincClientRect，因为 cilentRect 计算实际视口的坐标，而不是元素位置在页面上。另一个错误是，即确实定义了指针事件，但它们不适用于非 svgs；所以风格上的 'pointerEvents' 将返回 true，即使它们不会真正起作用。此外，这在某种程度上限制了功能。我已经尝试在简单的 div 上执行此操作 - 好的，但更复杂的东西（例如 google 地图）将无法工作

我非常喜欢这种优雅的方法。我将尝试在旧版浏览器中替换 pointerEvents:none

【参考方案4】：

这是另一个很容易用 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;

        );

【讨论】：

这不适用于点击和触发底层选择元素

【参考方案5】：

Internet Explorer 可识别指针事件：无，但仅适用于 SVG 元素，因为在 W3C 规范 (http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty) 中仅为 SVG 元素指定了指针事件。

你可以试试这样的......

CSS：

#tryToClickMe

        pointer-events: none;
        width: 400px;
        height: 400px;
        background-color: red;
    

HTML：

<svg id="tryToClickMe"></svg>

这适用于 IE9 和 IE10（我测试过）。如果您尚未使用 SVG 元素，则可以将现有元素包装在 SVG 中。 jQuery 库为此提供了一个 wrap 方法 (http://api.jquery.com/wrap/)。

有一篇很好的德文文章分解了指针事件属性的特征：http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - 在那里你会发现（在谷歌翻译的帮助下）更多信息。

希望我能帮上忙

本尼

附：如果要访问上层和底层对象，可以使用 IE 中的 document.msElementsFromPoint 方法 (http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx)。它将为您提供数组中给定点上的所有层。

【讨论】：

你让它在 IE9 中工作了吗？它对我不起作用。我在 IE9 中尝试过 jsfiddle.net/AGVTM 并且指针事件不会转发到蓝色矩形重叠的红色矩形。小提琴取自***.com/questions/13972730/…

【参考方案6】：

刚刚花了两天时间研究这个 IE10 项目（IE10 不支持指针事件：无 CSS 属性，MS 投票支持撤回规范，因为可能存在点击劫持问题）。 解决方法是使用 INLINED SVG 标记并在 SVG 中设置指针事件。 我一直在尝试使用例如带有 SVG src 的 IMG 标记，或带有背景图像的 DIV 设置为 SVG 文件（我会使用指针事件 =“none”），甚至是 SVG 数据 uris，但我没有想到有它在一个单独的元素中恰好需要未实现的指针事件 CSS 属性。

所以你需要一个像这样的基本 SVG：首先是一些 CSS，例如：

    .squareBottomRight 
        width: 50px;
        height: 50px;
        position: absolute;
        bottom: 0;
        right: 0;
    

然后在 HTML 中：

    <svg class="squareBottomRight" xmlns="http://www.w3.org/2000/svg"
        pointer-events="none">
        <rect id="test2_rect" x="0" y="0"   fill="blue"/>
    </svg>

参考：https://bug-45467-attachments.webkit.org/attachment.cgi?id=67050