项目中遇到一个问题,滚轮缩放或鼠标移动svg的时候,当鼠标放置在svg元素上时,firefox浏览器中的offsetX和offsetY是不准确的,导致缩放和移动会产生便宜,其实问题不是firefox计算问题,比如svg元素下有g,g下面有text,现在我们对text进行缩放,而offsetX的计算是相对父元素的,所以计算得到的值是相对于g标签的(但是google等又能正确计算)。然而不管怎么说,我们希望得到的是子元素相对于svg标签的offsetX,所以我们利用jquery提供的offset()手动计算好了:

var offsetX = e.pageX - $('#svg').offset().left;
var offsetY = e.pageY - $('#svg').offset().top;

这是一个实验中的功能MouseEvent.offsetX

此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

firefox中遇到的offsetX的问题的更多相关文章

  1. table中bordercolor属性设置后最新ie浏览器或firefox中不显示边线,借助table的css来实现边线

    table中的bordercolor属性设置后在最新的ie或者firefox中均不显示边线,table的边线又是常用功能.只能使用css来实现了,更通用,更方便一些. css: ​.ctable{ b ...

  2. 仅Firefox中A元素包含Select时点击Select不能选择option

    这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...

  3. firefox中 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因

    最近在调试复选框的应用,在ie没有问题,考虑到兼容性,试试了firefox,遇到了问题. 复选框绑定了click事件,点一次选中,再点击取消选中,依次类推.这个功能在ie中没问题,但是在firefox ...

  4. Ajax请求在IE和Google Chrome中可以响应,在Firefox中无法响应

    在工作中碰到这么一个问题,发送ajax请求,在IE和chrome中可以正常的响应,但是在Firefox中无法响应,代码如下: JS代码: function Sure(obj) { var statu ...

  5. firefox 中碰到的一个小坑

    情况描述: 在一个处于正常文档流的div中,里面有一部分文字,还有个有浮动的块, 上代码 HTML: <div class="container">   this is ...

  6. 在Firefox中通过AJAX跨域访问Web资源---

    一.解决在firefox中无法跨域访问的问题 AJAX从本质上讲就是命名用XMLHttpRequest组件来向服务端发送HTTP请求,请接收相应信息.至于成功接收到响应信息后的操作,就和普通的Web客 ...

  7. css padding在ie7、ie6、firefox中的兼容问题

    padding 简写属性在一个声明中设置所有内边距属性. 说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度.行内非替换元素上设置的内边距不会影响行高计算:因此,如果一个元素既有内边 ...

  8. JS网站当前日期在IE9、Chrome和FireFox中年份显示为113年的解决方法 getFullYear();

    JS网站当前日期在IE9.Chrome和FireFox中年份显示为113年的解决方法 getFullYear();

  9. Selenium在Firefox中踩过的

    本文转至 http://www.51testing.com/html/11/n-3711311.html,作者对webdriver在Firefox中设置profile配置项挺熟的,是用Python实现 ...

随机推荐

  1. Spring Bean装配

    1. Bean注入三种方式: A. 包扫描 + 组件标注注解(@Controller/@Service/@Repository/@Component),适用场景:自己写的类: B. @Bean或xml ...

  2. cmake让add_subdirectory()的所有target生成到同一目录

    问题描述和解决办法 整个项目包括: 库.测试程序,都是基于源码生成:测试程序肯定是executable类型了,而如果生成的库是SHARED类型,在windows下就是.dll(以及对应的.lib)文件 ...

  3. C# DynamicObject 动态对象

    dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...

  4. 用Java开发一个工具类,提供似于js中eval函数功能的eval方法

    今天在看到<Java疯狂讲义>中一个章节习题: 开发一个工具类,该工具类提供一个eval()方法,实现JavaScript中eval()函数的功能--可以动态运行一行或多行程序代码.例如: ...

  5. ImCash:币圈英文术语大全

    近年来随着数字货币的火热,在全世界范围内涌现出了一群数字货币的“发烧友”和忠实投资者,他们形成了自己的圈子“币圈”,并且有了自己的文化和语言,今天就让我们一起来了解一下外国币圈有哪些有意思的英文“专用 ...

  6. macof python攻击脚本

    #!/usr/bin/python import sys from scapy.all import * import time iface="eth0" if len(sys.a ...

  7. datatable中的copy和clone的用法区分

    dt.copy();//复制结构和数据 dt.clone();//仅复制结构,不复制数据

  8. aizhan爱站关键字采集

    功能:支持批量网站查询,支持登录后查询,支持批量导出txt http://blog.ddian.cn/content/uploadfile/201402/dc5c501411f758849b09c09 ...

  9. 1.3 正则表达式和python语言-1.3.8 创建字符集([ ])

    1.3.8 创建字符集([ ]) (2018-05-0815:24:00) 下面的示例将说明对于 r2d2|c3po 的限制将比[cr][23][dp][o2]更为严格 import re # 下面的 ...

  10. PHP 关于判断输入日期是否合法

    合法要求 一年仅十二个月 4,6,9,11月仅30天,1,3,5,7,8,10,12月仅31天 闰年2月29天,否则28天 输入的变量年,月,日为数字 代码: <?php //PHP中判断输入的 ...