以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』  (http://bbs.xml.org.cn/list.asp?boardid=22)
----  javascript 事件控管問題?  (http://bbs.xml.org.cn/dispbbs.asp?boardid=22&rootid=&id=83407)

--  作者：huajen_chen
--  发布时间：2/1/2010 6:28:00 PM

--  javascript 事件控管問題?
您好,
   假设我有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);
    }
  }

W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 4,585.938ms