IE9 通过屏蔽画布元素转发鼠标事件

Posted 2023-03-05

【中文标题】IE9 通过屏蔽画布元素转发鼠标事件

【英文标题】：IE9 Forward mouse events through a masking canvas element

【发布时间】：2011-11-18 18:58:00

【问题描述】：

我的绝对定位的画布元素阻止了所有鼠标事件，因此它们下方的任何内容都不能被点击，同样的问题提到了here 和here。

我有多个需要位于特定 z-index 的画布层，因此我需要通过画布转发鼠标事件。 pointer-events: none; 在不错的浏览器中工作，但对于 IE9 我需要 javascript 来完成，这是我目前的解决方案，

 var evts = [ 'click', 'mousedown', 'mouseup', 'dblclick'],
                canvases = $('canvas');

            $.each(evts, function(_, event)
                canvases.bind(event, function(evt)
                    var target,
                        pEvent;
                    $(this).hide();
                    target = document.elementFromPoint(evt.clientX, evt.clientY); 
                    $(this).show();
                    pEvent = $.Event(event);
                    pEvent.target = target;
                    pEvent.data = evt.data;
                    pEvent.currentTarget = target;
                    pEvent.pageX = evt.pageX;
                    pEvent.pageY = evt.pageY;
                    pEvent.result = evt.result;
                    pEvent.timeStamp = evt.timeStamp;
                    pEvent.which = evt.which;
                    $(target).trigger(event, pEvent);
                 );
            );   

工作示例， jsFiddle

问题；

1.我正在创建新事件并传递相关数据，传递 evt var 并修改目标和 currentTarget 是否安全？

2。如何推广右键单击？

或者有没有人有更好的方法来做到这一点？其他相关问题都比较老了。

【参考方案1】：

没有clean 方法可以跨浏览器传递事件。您可以传递（修改后的）事件，但不能保证它会正常工作，尤其是跨浏览器。

要使用您的代码进行右键单击，只需执行以下操作：http://jsfiddle.net/6WMXh/20/

（你一半使用了 jquery 额外信息部分，但从未对它做任何事情）

【讨论】：

我正在尝试通过画布发送事件，而不是发送到画布中。在 IE9 中，画布下方的任何元素都不会获得传递给它的点击事件。你可以在 IE9 中看到我的意思 here。

天哪，我没注意到下面的元素不是画布！我已经编辑了我的答案，但可悲的事实是，仍然没有黄金方法可以做到这一点。

谢谢，我只需要添加一个检查，这样它也适用于不在画布下的元素，e.button == 2 || pEvent.button == 2。 Dam，我讨厌 IE...