如何使Internet Explorer模拟pointerevent:none?

I'm working on a project where we are enhancing highcharts by displaying a gradient PNG over the charts. We are using CSS pointer-events:none; to allow users to interact with the chart despite there being a div layered over the top. IE doesn't recognize pointer-events:none;, so users on IE either can't have enhanced chart design, or can't interact with the charts. I'm looking for a way to get IE to allow mouse events (specificaly hover events), to pass through a div to the elements below it.

我正在做一个项目，我们通过在图表上显示一个渐变的PNG来增强highcharts。我们正在使用CSS pointerevents:none;允许用户与图表交互，尽管在顶部有一个div层。IE不认识pointerevents:none;因此IE用户不能使用增强的图表设计，或者不能与图表交互。我正在寻找一种方法来让IE允许鼠标事件(特殊的悬停事件)，通过一个div传递到它下面的元素。

You can see a model of what we're working with here: http://jsfiddle.net/PFKEM/2/

您可以在这里看到我们正在使用的模型:http://jsfiddle.net/PFKEM/2/。

Is there a way to get IE to do something like pointer events:none;, where mouse events pass through an element to elements blow them?

是否有一种方法可以让IE做一些类似指针事件的操作:none;在鼠标事件通过元素到元素的地方?

7 个解决方案

#1

Hope this helps :)

希望这有助于:)

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

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

You can also try a javascript solution :

您还可以尝试一个javascript解决方案:

http://jsbin.com/uhuto

http://jsbin.com/uhuto

#2

The Internet Explorer recognizes pointer events: none, but only for SVG elements because pointer-events are only specified for SVG elements in the W3C specification (http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty).

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

You can try it with something like this...

你可以试试这个…

CSS:

CSS:

#tryToClickMe{

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

HTML:

HTML:

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

This works in IE9 and IE10 (I tested it). If you are not yet using SVG elements, then there is the posibility to wrap your existing elements in a SVG. The jQuery library provides a wrap method for that (http://api.jquery.com/wrap/).

这在IE9和IE10中都有效果(我测试过)。如果您还没有使用SVG元素，那么可以将现有元素封装到SVG中。jQuery库提供了一个wrap方法(http://api.jquery.com/wrap/)。

There is a very good German article that has broken down the characteristics of the pointer events property: http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - There you will find (with the help of Google Translate) more information.

有一篇很好的德语文章，它已经分解了指针事件属性的特性:http://www.bennyn.de/programmierung/html/unterschiedliche-implementierungen- - - - - - - - - - - - - - - - - - - - -在这里你会发现(在谷歌的帮助下翻译)更多的信息。

Hope I could help

希望我可以帮助

Benny

本尼

P.S. If you want to access overlying and underlying objects, then you can use the document.msElementsFromPoint method in IE (http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx). It will give you all layers on a given point in an array.

如果您想访问覆盖层和底层对象，则可以使用该文档。msElementsFromPoint方法在IE中(http://msdn.microsoft.com/de/library/windows/apps/hh465811.aspx)。它会给你一个数组中给定的点上的所有层。

#3

Just spent two days researching this for an IE10 project (IE10 doesn't support the pointer-events: none CSS property, MS voted for withdrawal of the spec because of possible clickjacking issues). Workaround is to have INLINED SVG tag and set pointer-events in SVG. I kept trying to use e.g. an IMG tag with SVG src, or a DIV with background-image set to a SVG file (where I'd use pointer-events="none"), even SVG data-uris, but it didn't occur to me that having it in a separate element precisely required the unimplemented pointer-events CSS property.

仅仅花了两天的时间来研究IE10项目(IE10不支持pointerevents:没有CSS属性，MS投票赞成退出规范，因为可能会出现clickjacking问题)。工作区是在SVG中嵌入SVG标记并设置pointerevents。我一直尝试使用例如SVG src的IMG标记，或者一个带有背景图像集的DIV(我将使用pointerevents =“none”)，甚至SVG数据uri，但我并没有想到，在一个单独的元素中拥有它需要的是未实现的pointerevents CSS属性。

So you need a bare-bones SVG like this: First some CSS e.g.:

所以你需要一个像这样的骨架SVG:首先是一些CSS。

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

And then in HTML:

然后在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>

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

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

#4

Here is another solution that is very easy to implement with 5 lines of code:

这是另一个很容易实现的解决方案，有5行代码:

1. Capture the 'mousedown' event for the top element (the element you want to turn off pointer events).
2. 捕捉顶部元素的“mousedown”事件(要关闭指针事件的元素)。
3. In the 'mousedown' hide the top element.
4. 在“mousedown”隐藏顶部元素。
5. Use 'document.elementFromPoint()' to get the underlying element.
6. 使用“document.elementFromPoint()”来获取基础元素。
7. Unhide the top element.
8. 取消隐藏元素。
9. Execute the desired event for the underlying element.
10. 为基础元素执行所需的事件。

Example:

例子:

        //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

$.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/

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

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

#6

CSS:

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:

古老的HTML:

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

NEW HTML:

新的HTML:

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

#7

Adding the following CSS will disable ms pointers.

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

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