首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Safari和Firefox上,Dragend客户端坐标不一致

是由于浏览器的实现差异导致的。具体来说,这个问题涉及到了浏览器的事件模型、坐标系统以及事件触发的时机。

在Safari中,Dragend事件的客户端坐标是相对于整个文档的坐标系来计算的。也就是说,它表示的是鼠标指针相对于整个文档左上角的位置。

而在Firefox中,Dragend事件的客户端坐标是相对于拖动元素的坐标系来计算的。也就是说,它表示的是鼠标指针相对于拖动元素左上角的位置。

这种差异可能会导致在使用Dragend事件时出现坐标不一致的情况。为了解决这个问题,可以通过以下几种方式来统一坐标:

  1. 使用事件对象的属性:在Dragend事件的处理函数中,可以通过事件对象的属性来获取鼠标指针的坐标。在Safari中,可以使用event.pageX和event.pageY来获取坐标;在Firefox中,可以使用event.clientX和event.clientY来获取坐标。通过判断浏览器类型,可以选择使用相应的属性来获取坐标值,从而实现统一。
  2. 使用兼容性库:为了简化开发过程,可以使用一些兼容性库来处理浏览器差异。例如,jQuery库提供了统一的事件处理接口,可以屏蔽不同浏览器之间的差异,使得开发者可以更方便地处理Dragend事件。

总结起来,解决Safari和Firefox上Dragend客户端坐标不一致的问题,可以通过使用事件对象的属性或者兼容性库来统一坐标。具体的实现方式可以根据项目需求和开发环境来选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

 IEFireFox中显示不一致

https://blog.csdn.net/huyuyang6688/article/details/38704045  IEFireFox中显示不一致         在做新闻发布系统后台登陆界面时...于是代码中加了两个“ ”,FireFox中达到预期效果了: ?         我们都知道,一个“ ”为一个字符大小。...可我明明已经“密码”二字中间添加了两个“ ”了,刚好为一个汉字的间距。但是IE浏览器中测试的结果,“密码”二字中间的间距仍然很小(大约只有一个字符的大小)。...我继续添加“ ”,IE中“密码”二字中间的间距不变,还是大约只有一个字符的大小,无论添加多少个 标记,好像最对只显示一个空格;而FireFox中则乖乖地如数显示出所添加的空格长度。...FireFox浏览器默认字体: ?

1.3K30
  • 再谈BOMDOM(5):各个大流浪器DOMBOM里面的那些坑—兼容性

    detail 下3 -3 firefox wheel detlaY 下3 -3 IE9-11 wheel deltaY 下40 -40 chrome wheel deltaY 下100 -100...Safari 都很给力的支持了。...问题一:Firefox,Chrome、SafariIE9都是通过非标准事件的pageXpageY属性来获取web页面的鼠标位置的。...pageX/Y获取到的是触发点相对文档区域左上角距离,以页面为参考点,不随滑动条移动而变化 问题二:IE 中,event 对象有 x, y 属性(事件发生的位置的 x 坐标 y 坐标)火狐中没有。...if (invalid) {     cancelEvent(evt)   } } 确定浏览器窗口的尺寸 对于主流浏览器来说,比如IE9、Firefox,ChromeSafari,支持名为innerWidth

    96740

    接上一篇事件详解

    ,会弹出图片地址了; 同样的功能,我们可以使用DOM0级的Image对象来实现,DOM出现之前,开发人员经常使用Image对象客户端预加载图像,如下代码: EventUtil.addHandler(...+,Firefox,Opera,chrome及Safari3+都支持,以便开发开发人员确定动态加载的javascript文件是否加载完毕;比如我们动态创建script标签后,通过load事件判断动态创建的...理解客户区坐标位置 含义是:鼠标指针可视区中的水平clientX垂直clientY坐标; 理解页面坐标位置pageXpageY: pageX与pageY是指页面坐标的位置,与clientXclientY...的区别是:它包含页面滚动条的位置, 屏幕横坐标screenX垂直坐标screenY属性是相对于整个屏幕的 理解鼠标滚轮事件: IE6首先实现了mousewheel事件,此后opera,chromesafari...,这两个属性分别保存着URL变化前后的完整URL; 支持的浏览器有:IE8+,firefox3.6+,safari5+,chromeopera10.6+ 在这些浏览器中,只有firefox3.6+,chrome

    1.9K60

    第161天:CSS3实现兼容性的渐变背景(gradient)效果

    startx 渐变透明效果开始处的 X坐标。 starty 渐变透明效果开始处的 Y坐标。  finishx 渐变透明效果结束处的 X坐标。  finishy 渐变透明效果结束处的 Y坐标。...三、Firefox浏览器下的渐变背景 对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性,-moz-linear-gradient属性,之前文章我详细介绍了Firefox3.6...下渐变背景的实现,您有兴趣可以狠狠地点击这里:CSS渐变之CSS3 gradientFirefox3.6下的使用 。...我在上一篇文章对此进行了非常详细的介绍,您可以狠狠地点击这里:CSS gradient渐变之webkit核心浏览器下的使用 。...linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); } 此段代码Safari

    1.3K30

    人生想要开挂,快来学习“画中画”!

    2018年10月,ChromePC 客户端69版本加入画中画的特性,但在该版本中画中画是默认关闭的,如果想开启该特性,需要在浏览器执行以下操作: 输入chrome://flags并按下回车键 搜索框依次搜索三个关键词...由于safari实现的时间太早,而谷歌又用自己的一套API,导致API目前尚未标准化(好消息是画中画Web API的规范 已经WICG草案阶段中了,大体chrome的API规范一致,具体可猛戳此处...),我将对目前已支持的浏览器(chromesafari)分别介绍其Web API: chrome运行 先来看一个示例(示例中的视频源来自腾讯): ?...safari运行 由于safari早在2016年就原生支持了画中画,因此APIchrome是完全不一致的。...画中画-safari示例 从上面示例可以看出,画中画相关属性方法都是挂载到具体的视频元素

    1.7K30

    Antv G6 拖拽生成节点

    分析 动手编码之前需要先对使用场景做一个分析。...此时需要考虑鼠标所在的屏幕坐标画布坐标的转换。 2、画布有拖拽缩放功能 如果画布支持拖拽缩放,那鼠标所在的屏幕坐标画布对应的坐标会更复杂。 3、元素面板如何实现拖拽功能?...查找相关 API 坐标转换 上面的需求中,第1点第2点其实都可以归为坐标转换。 如果要我们手动计算坐标的话其实还是挺麻烦的,好在 G6 为我们提供了一个 API ,可以将屏幕坐标转换成画布坐标。...雷猴 之后通过 dragend 事件可以监听到拖拽完鼠标松开的时刻,在这个事件中,将松开鼠标时的指针所在屏幕坐标转换成画布对应的坐标,再通过 graph.addItem...(type, model, stack) 方法画布添加节点即可。

    1.5K10

    JavaScript是如何工作的:渲染引擎优化其性能的技巧

    以下是一些最受欢迎的: Gecko — Firefox WebKit — Safari Blink — Chrome,Opera (版本 15 之后) Firefox、Chrome Safari...是基于两种渲染引擎构建的,Firefox 使用 Geoko——Mozilla 自主研发的渲染引擎,Safari Chrome 都使用 Webkit。...不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们 CSS 的最开始要写 *{padding:0;marging:0};,也就是我们要重置CSS默认样式的。...开始布局过程意味着给每个节点在屏幕应该出现的确切坐标。 绘制渲染树 在此绘制,遍历渲染器树并调用渲染器的 paint() 方法以屏幕显示内容。...为了更好的用户体验,渲染引擎将尽可能快地屏幕显示内容。它不会等到解析完所有 HTML 后才开始构建和布局渲染树,而是解析显示部分内容,同时继续处理来自网络的其余内容项。

    1.6K30

    在网页中使用自定义字体

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问...Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@font-face实现的,为了能让更多的朋友知道如何使用他,今天我主要把自己的一点学习过程贴上来大家分享...说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式...【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】; 二、OpenType(.otf)格式: .otf字体被认为是一种原始的字体格式...,其内置TureType的基础,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2

    1.8K10

    62款前端数据可视化插件大盘点

    5.canvasjs url:http://canvasjs.com browser:官方未说明 resume:一个使用HTML5、JavaScript创建图表画布,图表包括几个好看的主题10倍的速度比传统的基于...数据集管理客户端数据简单处理加载、解析、排序、查询操纵来自各种数据源的数据。 ?...jscharts绘制图表是一个简单容易的任务,因为您只需要使用客户端脚本(即由web浏览器)。不需要额外的插件或服务器模块。...RGraph创建这些图表web浏览器使用JavaScript,这意味着更快的页面web服务器负载,导致较小的页面大小更快的网站。 ?...2+, Safari 3+, Opera 9, Chrome and Internet Explorer 6+,iosandriod设备 resume:使用内嵌HTML中的数据或通过javascript

    24.7K101

    WebGL 入门-WebGL简介与3D图形学

    桌面浏览器 Mozilla Firefox 4+ Google Chrome 8+ Internet Explorer 11+ Safari 5.1+ Opera 12+ 移动浏览器 Firefox 25...3D坐标系 笛卡儿坐标系相比大家都很熟悉,即数学中常见的直角坐标系,由两条互相垂直的坐标轴组成,通常标记为x轴y轴。这种坐标系可以用于定义页面中元素的坐标位置。...摄像机、视口投影 我们Canvas看到的3D空间并非一个真实的3D空间,而是用数学算法将模拟的3D空间投射到2D视口的图像而已。...投影就是将模拟的三维空间内的物体映射到屏幕生成一个二维图像的过程。投影分为正交投影透视投影,这也就是摄像机的实现原理。...摄像机是用户观察场景的眼睛,摄像机的视野决定了透视关系和我们Canvas看到的内容。 ? 着色器 为了最终的渲染模型,开发者必须精确的定义定点、变换、材质相机之间的关系。这就是由着色器来完成的。

    2.7K110

    用python爬取腾讯招聘网岗位信息保存到表格,并做成简单可视化。(附源码)「建议收藏」

    , x_axis_data, 'ro-', color='#4169E1', alpha=0.8, linewidth=1, label='数量') # 显示标签,如果不加这句,即使plot...plt.ylabel('名称') # 纵坐标轴标题 plt.savefig(f'岗位地址岗位属性散点图') plt.show() # 第四张图:根据岗位地址岗位属性二者数量生成柱状图...plt.legend(['分解能耗', '真实能耗'], prop=zhfont1, labelspacing=1) for a, b in zip(index, num_list): # 柱子的数字显示...plt.ylabel('名称') # 纵坐标轴标题 plt.savefig(f'岗位地址岗位属性散点图') plt.show() #...plt.legend(['分解能耗', '真实能耗'], prop=zhfont1, labelspacing=1) for a, b in zip(index, num_list): # 柱子的数字显示

    1K20

    【HTML5】逐步分析如何实现拖放功能

    那么,就让我们来看看如何实现的吧 二、拖放事件 IE4的时候,Js就可以实现拖放功能了,当时只支持拖放图像一些文本。...后来随着IE版本的更新,拖放事件也慢慢完善,HTML5就以IE的拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。...因此,图像、链接、文本的 draggable 属性默认为 true,其余元素的 draggable 属性默认为 false 实现拖放功能时有这样两个概念,分别是被拖动元素目标元素,它们都有各自支持的事件...(2)目标元素的事件 实现拖放功能的过程中,目标元素的事件有如下三个 事件 含义 dragenter 被拖放元素进入目标元素时触发 dragover 被拖放元素目标元素内时触发(频繁触发) dragleave...(2)属性 dataTransfer对象 还有两个比较常用的属性,如下表所示 属性 含义 dropEffect 被拖放元素的放置行为 effectAllowed 目标元素支持的放置行为 首先说一下

    1.5K10

    彻底理解Doctype

    Mozilla Firefox 1+ 支持三种呈现模式:Quirks 模式、Almost Standards 模式 Standards 模式。...Firefox 的 Almost Standards 模式对应于 Internet Explorer Opera 的 Standards 模式。...实际,由于多方面的原因,有的时候浏览器并不能够正常的进行doctype的切换,原因如下 1、doctype声明不在第一行。 IE,Opera旧版Safari都希望文档的第一行是doctype声明。...IEOpera使用Standards模式;Netscape 6旧版本的Safari使用Quirks模式;Netscape 7、Mozilla 1新版本的Safari使用Netscape的Almost...浏览器处理不能识别的doctype时,也存在不一致的现象。IEOpera会进入Standards模式;换言之,它假定不能识别的 doctype 是尚未在浏览器中集成的一个新标准。

    84510
    领券