我绝对定位的画布元素阻止了所有鼠标事件,因此它们下面的任何内容都无法单击,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。我正在创建新事件并传递相关数据,是否可以安全地通过修改了target和currentTarget的evt
变量?
2。我如何主张右键单击?
还是有人有更好的方法来实现这一目标?其他相关问题已经很老了。
没有clean方式可以跨浏览器传递事件。您可以传递(已修改的)事件,但不能保证它可以正常运行,特别是跨浏览器。
对于使用您的代码的右键单击,只需执行以下操作:http://jsfiddle.net/6WMXh/20/
((您一半使用了jquery的额外信息部分,但从未对其进行任何操作)