我正在开展一个项目，我们通过在图表上显示渐变 PNG 来增强 highcharts。我们使用 CSS pointer-events:none; 来允许用户与图表交互，尽管顶部有一个 div 分层。 IE 无法识别pointer-events:none;，因此 IE 上的用户要么无法增强图表设计，要么无法与图表交互。我正在寻找一种方法让 IE 允许鼠标事件（特别是悬停事件）通过 div 传递到它下面的元素。
您可以在此处查看我们正在使用的模型：http://jsfiddle.net/PFKEM/2/
有没有办法让 IE 执行类似 pointer events:none; 之类的操作，鼠标事件通过一个元素传递到另一个元素？
【问题讨论】：
标签： javascript html css internet-explorer cross-browser
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>
【讨论】：
添加以下 CSS 将禁用 ms 指针。
#container{
-ms-touch-action: none;
}
【讨论】：
$.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');
});
【讨论】：
这是另一个很容易用 5 行代码实现的解决方案：
例子：
//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;
});
【讨论】：
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)。它将为您提供数组中给定点上的所有层。
【讨论】：
刚刚花了两天时间研究这个 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" width="50" height="50" fill="blue"/>
</svg>
参考：https://bug-45467-attachments.webkit.org/attachment.cgi?id=67050
【讨论】：