jQuery ZeroClipboard中Flash定位不准确的解决方案

转自波斯马，原文地址《jQuery ZeroClipboard中Flash定位不准确的解决方案》

jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板，IE、Firefox、Chrome等等都不在话下。其本身作为jQuery的一个插件封装了Zero Clioborad，其实现原理就是在要点击的按钮或链接上覆盖一个透明的Flash，实际上用户点击的是Flash，复制到剪贴板也是通过此Flash实现的。

大家用的很Happy，但是我用的时候发现点击按钮没有反应，后来发现是Flash出现的位置不对，可能原作者写的时候没有在复杂的样式环境下测试过。Flash的位置是动态设定的，找到其源码查看，发现一处可能有问题的地方：

 1 getDOMObjectPosition: function (obj, stopObj) {
 2 // get absolute coordinates for dom element
 3 var info = {
 4 left: 0,
 5 top: 0,
 6 width: obj.width ? obj.width : obj.offsetWidth,
 7 height: obj.height ? obj.height : obj.offsetHeight
 8 };
 9
10 if (obj && (obj != stopObj)) {
11 info.left += obj.offsetLeft;
12 info.top += obj.offsetTop;
13 }
14
15 return info;
16 },

注意下边这两句：

info.left += obj.offsetLeft;
info.top += obj.offsetTop;

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素；obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。实际测试获取到的是相对于上层控件的位置。

但是在创建浮动层的时候，定位方式使用了absolute，同时设置top，left为上边的值：

 1 // create floating DIV above element
 2 this.div = document.createElement('div');
 3 this.div.className = "zclip";
 4 this.div.id = "zclip-" + this.movieId;
 5 jQuery(this.domElement).data('zclipId', 'zclip-' + this.movieId);
 6 var style = this.div.style;
 7 style.position = 'absolute';
 8 style.left = '' + box.left + 'px';
 9 style.top = '' + box.top + 'px';
10 style.width = '' + box.width + 'px';
11 style.height = '' + box.height + 'px';
12 style.zIndex = zIndex;

实际测试是到页面上方和左侧的距离。这样就是将相对于上层控件的位置应用为了相对于整个页面的位置，所以Flash没有出现在按钮的位置。

既然明确了这个问题，那获取按钮位置的时候我们就换一种方法，因为使用了jQuery，直接上Jquery的方法既可以了：

getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};if (obj && (obj != stopObj)) {
// 修改了这里
//info.left += obj.offsetLeft;
//info.top += obj.offsetTop;
info.left += $(obj).offset().left;
info.top += $(obj).offset().top;
}return info;
},

对于浏览器对CSS的解析不是很了解，此方案仅适合遇到这个问题的朋友尝试下，可能最终原因还不是这个，因为貌似大家一直用的挺好。

最后附上插件地址：https://github.com/patricklodder/jquery-zclip

转载于:https://www.cnblogs.com/fallsleep/p/4201611.html

jQuery ZeroClipboard中Flash定位不准确的解决方案相关推荐

百度地图、高德地图和腾讯地图定位不准确的解决方案
需求由于使用我们公司设备的用户分布在全球各地,最近好多设备都坏了,现在我们公司的修理师要去现场修理设备,但是设备太多了,200多个地址,不好找,而且又不能非常一目了然的查看到分布在全国的需要进行设备 ...
html div图片定位,html中div定位练习
html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...
html中div的定位,html中div定位练习
html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...
小tips：解决burp光标定位不准确
问题: burp抓包过程中,定位不准确,详细看图内光标定位位置解决方法: 1.根据百度首条解决方式:未果 2.通过调节字体和字体大小:完美解决转载请注明:Adminxe's Blog » 小tip ...
jquery ZeroClipboard实现黏贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
IOS中GPS定位偏移纠正（适用于Google地图）
在这个神奇的国度里,我们总得学习一些有中国特色的东东,例如"火星坐标".也许有人还不知道这是什么玩意,我就简要介绍一下吧. 如果你有带GPS模块的智能手机,打开定位功能, ...
jQuery Mobile中弹窗popup的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中弹窗popup的data-*选项带有 data-role="popup&q ...
jQuery Mobile中链接（包含button和表单提交的链接）的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中链接的data-*选项所有的链接,包含那些带有 data-role="bu ...
jQuery Mobile中头部栏header的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中头部栏header的data-*选项带有 data-role="heade ...

jQuery ZeroClipboard中Flash定位不准确的解决方案

jQuery ZeroClipboard中Flash定位不准确的解决方案相关推荐

最新文章

热门文章