简体繁体 English

微软边缘的svg解决方法中的鼠标事件

[英]Mouse events in svg workaround for microsoft edge

原文 2016-09-13 08:27:47 5 1 javascript/ html/ svg/ microsoft-edge

I am loading an SVG file in an <object> tag of a html page. 我在一个html页面的<object>标签中加载一个SVG文件。 The SVG contains images with mouse events onclick , onmouseover and onmouseout . SVG包含鼠标事件onclick ， onmouseover和onmouseout 。 I find that those trigger as they should in firefox and google-chrome. 我发现那些触发器应该在firefox和google-chrome中触发。

When I load the page with Microsoft edge I find that: 当我使用Microsoft edge加载页面时，我发现：

onclick does not seem to trigger, onclick似乎没有触发，
onmouseover trigers many times when I move the mouse over the image (and not only once), 当我将鼠标移到图像上时（而不仅仅是一次）， onmouseover会多次移动，
onmouseout does not seem to do anything either. onmouseout似乎也没有做任何事情。

Googeling the issue reveals that I am not the only one who encounters the problem with Microsoft edge and that the issue is older. Googeling这个问题表明，我不是唯一一个遇到微软优势问题的人，而且这个问题比较老。

But are there any workarounds for this sort of problem? 但这类问题有没有解决方法？

1 个解决方案

I found that for the svg sub-elements in which I set css to {pointer-events: bounding-box} that bounding-box was not a css option in Edge. 我发现对于svg子元素，我在其中将css设置为{pointer-events: bounding-box} ，该bounding-box不是Edge中的css选项。 I changed css for these elements to {pointer-events: visible} for Edge and then my mouse events fired as they did in Chrome and Firefox. 我将这些元素的css更改为Edge的{pointer-events: visible} ，然后我的鼠标事件就像在Chrome和Firefox中一样。