JavaScript拖拽图片四
来源:互联网 发布:淘宝免费装修模板下载 编辑:程序博客网 时间:2024/04/28 03:02
现在用Firefox最新版本13.0测试,不work,图片会自动回到原位。
安装firebug扩展后调试一下。
到console窗口点击enable后,
错误信息是:
window.event is undefined.
Firefox不支持window.event,因此所有用到event的地方要类似这样写:
function mouseDown(e) {'use strict';e = e || window.event;//必须这样写window.dragObj = e.currentTarget || e.srcElement;if (window.dragObj !== null) {window.clickLeft = e.x - parseInt(window.dragObj.style.left, 10);window.clickTop = e.y - parseInt(window.dragObj.style.top, 10);window.dragObj.style.zIndex += 1;}}
解决了这个错误后,测试一下Chrome和IE6,都工作正常,但是Firefox仍然不行。鼠标左键松开的时候,图片仍然跟着跑。
注意,在Ubuntu12.04+FireFox13.0+FireBug1.9下,debug很容易让Firefox死掉。
这个问题是因为Firefox的mouseUp事件没有被触发。用下面的代码可以解决,在mouseDown函数中,添加:
if(e.preventDefault) {e.preventDefault();}else {e.returnValue = false;}这样mouseUp事件就能正常触发了。重构一下代码,再用jslint4java扫描一下,解决了书写格式后。现在一份同时兼容IE6 sp3, Firefox13.0,Chrome的代码出现了:
/*global window */function getEvent(e) {'use strict';return e || window.event;}function getTarget(e) {'use strict';return e.currentTarget || e.srcElement;}function getPos(e) {'use strict';return {x: e.x || e.clientX,y: e.y || e.clientY};}function mouseDown(e) {'use strict';e = getEvent(e);window.dragObj = getTarget(e);if (e.preventDefault) {e.preventDefault();} else {e.returnValue = false;}if (window.dragObj !== null) {var pos = getPos(e);window.clickLeft = pos.x - parseInt(window.dragObj.style.left, 10);window.clickTop = pos.y - parseInt(window.dragObj.style.top, 10);window.dragObj.style.zIndex += 1;}}/** * IE6.0 need this */function mouseStop(e) {'use strict';e = getEvent(e);e.returnValue = false;}function mouseMove(e) {'use strict';e = getEvent(e);if (window.dragObj !== null) {var pos = getPos(e);window.dragObj.style.left = pos.x - window.clickLeft;window.dragObj.style.top = pos.y - window.clickTop;}}function mouseUp() {'use strict';window.dragObj = null;}function init() {'use strict';window.dragObj = null;window.document.onmousemove = mouseMove;window.document.onmouseup = mouseUp;window.document.ondragstart = mouseStop;}
做前端真的不容易啊。我还没有测试IE7,8,9呢!
- JavaScript拖拽图片四
- JavaScript拖拽图片一
- JavaScript拖拽图片二
- JavaScript拖拽图片三
- JavaScript拖拽图片一
- JavaScript拖拽图片二
- javascript(四)
- JavaScript(四)
- JavaScript<四>
- JavaScript(四)
- Javascript编的随意拖拽图片的网页
- javascript 实现图片的拖拽和伸缩效果
- javascript实现对图片的随意拖拽,放大缩小
- javascript+css实现拖拽效果(点击图片,图片返回原区域)
- React Native 四:图片
- img图片四要素
- JavaScript学习(四)
- JavaScript入门(四)
- 从问题看本质: 研究TCP close_wait的内幕
- 非静态实例的初始化
- 运用向量求10000!的阶乘
- 算法导论 第14章 14.1 动态顺序统计
- C#常用的集合
- JavaScript拖拽图片四
- 程序员技术练级攻略(转)
- 交叉编译ARM版 QT
- C++文件读写(一)
- 项目工程
- 面向对象、原则、设计模式、重构之间关系的经典诠释
- 运用向量求两个很长正数的和
- Strategy策略模式
- php当中的memcache应用