项目中遇到一个问题,滚轮缩放或鼠标移动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. cmake编译opencv指南

    目录 cmake编译opencv指南 用包管理器安装 查看opencv相关的包 执行安装 编译安装 为什么编译安装 下载源码 编译脚本 执行编译脚本.解决3rdparty下载 编译后的设定-环境变量 ...

  2. ansible中的map

    ansible中的filter:   map  ,其实是jinja2中的filter python中 map(func, iter) 返回func与每个元素计算后的迭代器,iter是个可迭代对象 an ...

  3. 获取clock ticks per second

    #include <sys/syscall.h> #include <stdio.h> #include <unistd.h> int main() { print ...

  4. 一起学爬虫——如何爬取通过ajax加载数据的网站

    目前很多网站都使用ajax技术动态加载数据,和常规的网站不一样,数据时动态加载的,如果我们使用常规的方法爬取网页,得到的只是一堆html代码,没有任何的数据. 请看下面的代码: url = 'http ...

  5. day21.模块和包

    博客整理来源:http://www.cnblogs.com/Eva-J/articles/7292109.html 模块 1.什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件 ...

  6. android studio 虚拟机adb.exe已停止工作的处理

    在搭建完android studio 后使用虚拟机或真机调试程序,出现如下错误.   在运行里输入cmd,打开命令行工具,使用netstat -aon|findstr 5037查看adb.exe的50 ...

  7. Shell编程-控制结构 | 基础篇

    if-then-else分支结构 if-then-else是一种基于条件测试结果的流程控制结构.如果测试结果为真,则执行控制结构中相应的命令列表:否则将进行另外一个条件测试或者退出该控制结构. if- ...

  8. notes for lxf(二)

    函数 abs()绝对值 max()返回最大值 raise 后接异常类 引发异常 函数返回多个值其实就是返回一个tuple 函数默认返回None 如果有必要检查参数类型用isinstance() typ ...

  9. ZOJ 2588 Burning Bridges 割边(处理重边)

    <题目链接> 题目大意: 给定一个无向图,让你尽可能的删边,但是删边之后,仍然需要保证图的连通性,输出那些不能被删除的边. 解题分析: 就是无向图求桥的题目,主要是提高一下处理重边的姿势. ...

  10. 通过zabbix的API接口获取服务器列表

    Zabbix API说明 1) 基于Web的API,作为Web前端的一部分提供,使用JSON-RPC 2.0协议 2) 身份认证Token:在访问Zabbix中的任何数据之前,需要登录并获取身份验证令 ...