Question

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

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

有没有办法让IE做类似 pointer events:none; 的事情，鼠标事件会通过元素传递给元素吗？

Answer 1

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库为它提供了一个包装方法（http://api.jquery.com/wrap/）。

有一篇非常好的德国文章分解了指针事件属性的特征：http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - 在那里你可以找到（在Google翻译的帮助下）更多信息。

希望我能帮忙

尼

P.S。如果要访问覆盖和底层对象，则可以使用IE中的 document.msElementsFromPoint 方法（http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx）。它将为您提供数组中给定点的所有图层。

Answer 2

花了两天时间研究这个IE10项目（IE10不支持指针事件：没有CSS属性，MS因为可能的点击劫持问题而投票支持撤销规范）。解决方法是在SVG中使用INLINED SVG标记并设置指针事件。我一直在努力使用，例如一个带有SVG src的IMG标签，或者一个背景图像设置为SVG文件的DIV（我使用的是pointer-events =“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" width="50" height="50" fill="blue"/>
    </svg>

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

Answer 3

希望这会有所帮助：）

http://www.vinylfox.com/forwarding-mouse-events-through-layers/

您也可以尝试使用javascript解决方案：

http://jsbin.com/uhuto

Answer 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;

        });

Answer 5

$.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');
});

Answer 6

<强> 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; 
}

OLD HTML：

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

新HTML：

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

Answer 7

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

#container{
    -ms-touch-action: none;
}

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

7 个答案: