[英]How to make Internet Explorer emulate pointer-events:none?
I'm working on a project where we are enhancing highcharts by displaying a gradient PNG over the charts. 我正在开展一个项目,我们通过在图表上显示渐变PNG来增强高级图表。 We are using CSS
pointer-events:none;
我们正在使用CSS
pointer-events:none;
to allow users to interact with the chart despite there being a div layered over the top. 尽管在顶部有一个div层,但允许用户与图表进行交互。 IE doesn't recognize
pointer-events:none;
IE无法识别
pointer-events:none;
, so users on IE either can't have enhanced chart design, or can't interact with the charts. 因此IE上的用户既不能拥有增强的图表设计,也不能与图表进行交互。 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.
我正在寻找一种方法让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;
有没有办法让IE做类似
pointer events:none;
, where mouse events pass through an element to elements blow them? ,鼠标事件通过元素传递到元素吹他们?
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识别指针事件:无 ,但仅适用于SVG元素,因为指针事件仅针对W3C规范中的SVG元素指定( 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). 这适用于IE9和IE10(我测试过)。 If you are not yet using SVG elements, then there is the posibility to wrap your existing elements in a SVG.
如果您尚未使用SVG元素,则可以将现有元素包装在SVG中。 The jQuery library provides a wrap method for that ( http://api.jquery.com/wrap/ ).
jQuery库为它提供了一个包装方法( 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-der-eigenschaft-pointer-events.html - 你会查找(在谷歌翻译的帮助下)更多信息。
Hope I could help 希望我能提供帮助
Benny 班尼
PS 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 ). PS如果要访问覆盖和底层对象,则可以使用IE中的document.msElementsFromPoint方法( http://msdn.microsoft.com/de-DE/library/windows/apps/hh465811.aspx )。 It will give you all layers on a given point in an array.
它将为您提供阵列中给定点的所有图层。
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). 花了两天时间研究这个IE10项目(IE10不支持指针事件:没有CSS属性,MS因为可能的点击劫持问题而投票支持撤销规范)。 Workaround is to have INLINED SVG tag and set pointer-events in SVG.
解决方法是在SVG中使用INLINED SVG标记并设置指针事件。 I kept trying to use eg 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.
我一直试图使用例如带有SVG src的IMG标签,或者将背景图像设置为SVG文件的DIV(我使用pointer-events =“none”),甚至是SVG数据-uris,但它没有'在我看来,在一个单独的元素中拥有它精确地需要未实现的指针事件CSS属性。
So you need a bare-bones SVG like this: First some CSS eg: 所以你需要这样一个简单的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
Here is another solution that is very easy to implement with 5 lines of code: 这是另一个使用5行代码很容易实现的解决方案:
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;
});
$.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');
});
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>
Adding the following CSS will disable ms pointers. 添加以下CSS将禁用ms指针。
#container{
-ms-touch-action: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.