QuirksMode 鼠标位置对于 jQueryUI 选项卡中的 SVG 不正确？
我刚刚注意到一些奇怪的事情。如果我绘制一个 SVG 形状，当使用返回鼠标位置的标准方法时，我作为形状的 x 和 y 属性提供的坐标与该形状上的鼠标事件返回的坐标不匹配。
例如，如果我按如下方式绘制一个矩形：
shape = svgDocument.createElementNS(svgNS, "rect");
shape.setAttributeNS(null, "x", rect_x);
shape.setAttributeNS(null, "y", rect_y);
...
shape.addEventListener("mouseover", etc);
在事件例程中，我使用 QuirksMode 算法获取鼠标位置（“用于检测鼠标坐标的正确脚本”，位于 http://www.quirksmode.org/js/events_properties.html）。对于 Y 坐标，我必须按如下方式更正 QuirksMode 值，以便到达“rect_y”：
F/F 8 subtract 105
Webkit subtract 103
IE9 subtract 104
Opera subtract 103
同样令人好奇的是，Webkit 和 IE9 都提供了 evt.offsetY，并将其设置为“正确”位置（完全等于“rect_y”）。 FF 未定义 offsetY，Opera 将其设置为 1。
我怀疑问题是在 jQueryUI 选项卡中，尽管我还没有解决这个问题。有人见过这个吗？有什么想法吗？
I've just noticed something strange. If I draw an SVG shape, the co-ordinates I supply as the shape's x and y attributes don't match up with the co-ordinates returned by a mouse event on that shape, when using the standard ways of returning the mouse position.
For example, if I draw a rectangle as follows:
shape = svgDocument.createElementNS(svgNS, "rect");
shape.setAttributeNS(null, "x", rect_x);
shape.setAttributeNS(null, "y", rect_y);
...
shape.addEventListener("mouseover", etc);
in the event routine, I get the mouse position using the QuirksMode algorithm (the "correct script for detecting the mouse co-ordinates", at http://www.quirksmode.org/js/events_properties.html). For the Y co-ordinate, I have to correct the QuirksMode value as follows, in order to get to 'rect_y':
F/F 8 subtract 105
Webkit subtract 103
IE9 subtract 104
Opera subtract 103
What's also curious is that both Webkit and IE9 provide evt.offsetY, and set it to the 'correct' position (exactly equal to 'rect_y'). FF leaves offsetY undefined, and Opera sets it to 1.
I suspect that the issue is that this is in a jQueryUI tab, although I haven't worked this through yet. Anyone seen this? Any thoughts?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在 SVG 中，您可以使用 getScreenCTM 方法来转换坐标，而不是 offsetX 或 offsetY 等。这里有一个示例： http://www.carto.net/svg/eventhandling/ 搜索将 clientX 转换为 viewBox 坐标部分。它有点复杂，因为它试图应对没有 getScreenCTM 方法的旧 UA，例如 ASV3。
In SVG you would use the getScreenCTM method to convert co-ordinates rather than offsetX or offsetY etc. There's an example here: http://www.carto.net/svg/eventhandling/ Search for the Converting clientX to viewBox coordinates part. It's a bit complicated as it tries to cope with old UAs such as ASV3 that don't have a getScreenCTM method.