项目中遇到一个问题,滚轮缩放或鼠标移动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. jsp中一个标签两种方式绑定两个click事件导致未执行的问题

    近日,在开发过程中,写了一个标签 <li id="a1" onclick="doSomething()">...</li> 在js页面中 ...

  2. C# 操作docx文档

    一.需要引用DocX类库文件,可以直接在NuGet中找到. 二.创建文件,并添加一张表格 public static string fileName = AppDomain.CurrentDomain ...

  3. xss攻击与防御

    一.XSS攻击 Cross Site Scripting跨站脚本攻击 利用js和DOM攻击. 盗用cookie,获取敏感信息 破坏正常页面结构,插入恶意内容(广告..) 劫持前端逻辑 DDos攻击效果 ...

  4. 基本urllib库

    urlib库 urllib库是Python中一个最基本的网络请求库.可以模拟浏览器的行为,向指定的服务器发送一个请求,并可以保存服务器返回的数据. urlopen函数: 在Python3的urllib ...

  5. Redis持久化之RDB

    本文及后续文章,Redis版本均是v3.2.8 上篇文章介绍了RDB的优缺点,我们先来回顾下RDB的主要原理,在某个时间点把内存中所有数据保存到磁盘文件中,这个过程既可以通过人工输入命令执行,也可以让 ...

  6. 高性能HTTP加速器Varnish-3.0.3搭建、配置及优化步骤

    经过一天的努力,终于将Varnish缓存服务器部署到线上服务器了.趁着热乎劲儿,赶紧给大家分享一下.Varnish是一个轻量级的Cache和反向代理软件.先进的设计理念和成熟的设计框架是Varnish ...

  7. 2018-2019-2 网络对抗技术 20165319 Exp3 免杀原理与实践

    免杀原理及基础问题回答 免杀原理: 免杀指的是一种能使病毒木马免于被杀毒软件查杀的技术.由于免杀技术的涉猎面非常广,其中包含反汇编.逆向工程.系统漏洞等黑客技术,所以难度很高,一般人不会或没能力接触这 ...

  8. 蓝桥杯 黄金连分数(BigDecimal的使用)

    标题: 黄金连分数 黄金分割数0.61803... 是个无理数,这个常数十分重要,在许多工程问题中会出现.有时需要把这个数字求得很精确. 对于某些精密工程,常数的精度很重要.也许你听说过哈勃太空望远镜 ...

  9. php 缓存 加速缓存

    PHP四大加速缓存器opcache,apc,xcache,eAccelerator eAccelerator,xcache,opcache,apc(偏数据库缓存,分系统和用户缓存)是PHP缓存扩展, ...

  10. babel分析

    现在都用 ES6 新语法以及 ES7 新特性来写应用了,但是浏览器和相关的环境还不能友好的支持,需要用到 Babel 转码器来转换成 ES5 的代码 相信大家都看到过如下的名词: babel-pres ...