我正在做一个项目，我们通过在图表上显示渐变 PNG 来增强highcharts表。我们正在使用 CSSpointer-events:none;来允许用户与图表进行交互，尽管顶部有一个 div。IE 无法识别pointer-events:none;，因此IE 上的用户要么无法进行增强的图表设计，要么无法与图表进行交互。我正在寻找一种方法让 IE 允许鼠标事件（特别是悬停事件），通过一个 div 传递到它下面的元素。
您可以在此处查看我们正在使用的模型：http : //jsfiddle.net/PFKEM/2/
有没有办法让 IE 做一些类似的事情 pointer events:none;，鼠标事件通过一个元素传递给元素？
Internet Explorer 识别指针事件： none，但仅适用于 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.benynn.de/programmierung/html/unterschiedliche-implementierungen-der-eigenschaft-pointer-events.html - 那里你会查找（在谷歌翻译的帮助下）更多信息。
希望我能帮上忙
本尼
PS 如果你想访问上层和底层的对象，那么你可以使用IE 中的document.msElementsFromPoint方法（http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx）。它将为您提供数组中给定点上的所有图层。
刚刚花了两天时间为一个 IE10 项目研究这个（IE10 不支持指针事件：无 CSS 属性，由于可能的点击劫持问题，MS 投票赞成撤销规范）。解决方法是使用内联 SVG 标记并在 SVG 中设置指针事件。我一直在尝试使用例如带有 SVG src 的 IMG 标签，或者将背景图像设置为 SVG 文件的 DIV（我将使用指针事件=“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
这是另一个很容易用 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;
});
$.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');
});
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>