您好,
假设我有10个图形要在网页上能够自由地被拖曳移动. 我试了两种方法如下. 我想请问为何两种方式在鼠标拖曳图片时的效能会差这么多? 方法1的效能比方法2差许多, 不知问题出在哪? 请帮帮忙, 指教更精简更有效率的做法. 谢谢!!
1. 设定好addEventHandler, 这10个图形都去呼叫它, share同一个mousedown, mouseup, mousemove. 用target.addEventListener来触发事件函式.
problem: 鼠标只能慢慢移动, 否则图形来不及侦测mouseup而出现图形乱飘(应该是因为mousemove的listener仍在作用).
----------------------------------------------------
for(var i=0;i <GroupID02.childNodes.length;i++){
if(GroupID02.childNodes[i].id){
addEventHandler(GroupID02.childNodes[i],"mousedown",mousedown_listener);
}
}
function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, true);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
else target["on" + type] = func;
}
function removeEventHandler(target, type, func) {
if (target.removeEventListener)
target.removeEventListener(type, func, true);
else if (target.detachEvent)
target.detachEvent("on" + type, func);
else delete target["on" + type];
}
function mousedown_listener()
{
var oEvent = arguments[0];
var oTarget = oEvent.target || oEvent.srcElement;
dx = oTarget.x.baseVal.value - oEvent.clientX;
dy = oTarget.y.baseVal.value - oEvent.clientY;
addEventHandler(oTarget,"mousemove",mousemove_listener);
addEventHandler(oTarget,"mouseup",mouseup_listener);
}
function mousemove_listener()
{
var oEvent = arguments[0];
var oTarget = oEvent.target || oEvent.srcElement;
var id = oTarget.ownerSVGElement.suspendRedraw(1000);
oTarget.x.baseVal.value = oEvent.clientX + dx;
oTarget.y.baseVal.value = oEvent.clientY + dy;
oTarget.ownerSVGElement.unsuspendRedraw(id);
}
function mouseup_listener()
{
var oEvent = arguments[0];
var oTarget = oEvent.target || oEvent.srcElement;
removeEventHandler(oTarget,"mousemove",mousemove_listener);
removeEventHandler(oTarget,"mouseup",mouseup_listener);
}
2. 每个图形都有自己的mousedown, mouseup and mousemove, 用document.addEventListener来触发事件函式.
problem: 无法动态增加图片, 要另外新增事件控制程序码
-----------------------------------------------------
rectangle001.addEventListener("mousedown", mousedown_listener001, true);
rectangle002.addEventListener("mousedown", mousedown_listener002, true);
...
rectangle010.addEventListener("mousedown", mousedown_listener010, true);
function mousedown_listener001(evt)
{
dx001 = rectangle001.x.baseVal.value - evt.clientX;
dy001 = rectangle001.y.baseVal.value - evt.clientY;
if(ifIE){
document.attachEvent("mousemove", mousemove_listener001, true);
document.attachEvent("mouseup", mouseup_listener001, true);
}else{
document.addEventListener("mousemove", mousemove_listener001, true);
document.addEventListener("mouseup", mouseup_listener001, true);
}
}
....
function mousemove_listener001(evt)
{
var id = rectangle001.ownerSVGElement.suspendRedraw(1000);
rectangle001.x.baseVal.value = evt.clientX + dx001;
rectangle001.y.baseVal.value = evt.clientY + dy001;
rectangle001.ownerSVGElement.unsuspendRedraw(id);
}
...
function mouseup_listener001(evt)
{
if(ifIE){
document.detachEvent("mousemove", mousemove_listener001);
document.detachEvent("mouseup", mouseup_listener001);
}else{
document.removeEventListener("mousemove", mousemove_listener001, true);
document.removeEventListener("mouseup", mouseup_listener001, true);
}
}
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - XML技术 → 『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』 → javascript 事件控管問題?
(订阅本版)
2010/2/1 18:28:00
新浪微博
javascript 事件控管問題?
