javascript - 此 javascript 在鼠标悬停时失败

Question

谁能弄清楚为什么这个 JavaScript 不能工作？它正确地生成了 document.write 输出，但是当您尝试拖动它时，它开始提示未设置顶部和左侧。知道出了什么问题吗？

abilitynames=new Array('Heal','Slash','Stab','Poison Slash','Knockout','','','','Tornado','','','','','','','','Icespike','','','','','','','','Bolt','Jumping Bolt','','','','','','','Roast','Burn','','','','','','','Earthquake','Rockwall','','','','','','','Kill','Deflect','Anti-Heal','','','','','','Backslash','Darkwall','Steal','Take','','','','');
abilitytypes=new Array(3,1,1,1,1,2,2,2,1,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,1,1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1,2,3,2,2,2,2,2,1,2,3,3,2,2,2,2);
abilitycolors=new Array('#00FF00','#FFFFFF','#0000FF','#FFFF00','#FF0000','#AD6C00','#AD00FF','#000000');
for(i=0;i<64;i++){
document.write("<div onmousedown='dragging=this.id;this.style.position=\"fixed\";this.style.zIndex=1000;this.style.left=event.clientX-75;this.style.top=event.clientY-15;' onmouseout='if(dragging===this.id){this.style.left=event.clientX-75;this.style.top=event.clientY-15;}' onmousemove='if(dragging===this.id){this.style.left=event.clientX-75;this.style.top=event.clientY-15;}' onmouseup='dragging=false;if(event.clientX<450||event.clientY>"+(180+(abilitytypes[i]*90))+"||event.clientY<"+(100+((abilitytypes[i]-1)*(90*abilitytypes[i])/((4%abilitytypes[i])+1)))+"){this.style.position=\"relative\";this.style.top=0;this.style.left=0;this.style.zIndex=0;}else{this.style.left=460;this.style.top=(Math.round((event.clientY-30)/45)*45)+15;if(abilitys[Math.round((event.clientY-120)/45)]!=\"\"&&abilitys[Math.round((event.clientY-120)/45)]!=this.id){document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.position=\"relative\";document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.left=0;document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.top=0;}abilitys[Math.round((event.clientY-120)/45)]=this.id;alert(abilitys);}' id='"+i+"' class='abilityblock"+abilitytypes[i]+"'><div class='abilityicon' style='background-position:"+(Math.floor(i/8)*-20)+"px "+((i%8)*-20)+"px;'></div><div class='abilityname' style='color:"+abilitycolors[Math.floor(i/8)]+";'>"+abilitynames[i]+"</div></div>");
}

Answer 1

我可能已经破坏了脚本，只是试图清理这个邪恶的困惑并稍微简化一些事情，但至少它现在看起来更具可读性(不包括数组定义):

<script type="text/javascript">

var dragging;

function mouseDown(el) {
    dragging = el.id;
    el.style.position = "fixed";
    el.style.zIndex = 1000;
    el.style.left = event.clientX - 75;
    el.style.top = event.clientY-15;
}

function mouseOut(el) {
    if (dragging === el.id) {
        el.style.left = event.clientX - 75;
        el.style.top = event.clientY - 15;
    }
}

function mouseMove(el) {
    if (dragging === el.id) { 
        el.style.left = event.clientX - 75;
        el.style.top = event.clientY - 15;
    }
}

function mouseUp(el, i) {
    dragging = false;
    if (    (event.clientX < 450) ||
            (event.clientY > (180 + (abilitytypes[i] * 90)) ) ||
            (event.clientY < (100 + (abilitytypes[i] - 1) * (90 * abilitytypes[i]) / ((4 % abilitytypes[i]) + 1)))) {
        el.style.position = "relative";
        el.style.top = 0;
        el.style.left = 0;
        el.style.zIndex = 0;
    } else {
        el.style.left = 460;
        el.style.top = (Math.round((event.clientY - 30) / 45) * 45) + 15;
        if ((abilitys[Math.round((event.clientY - 120) / 45)] != "") && (abilitys[Math.round((event.clientY - 120) / 45)] != el.id)) {
            var subel = document.getElementById(abilitys[Math.round((event.clientY-120)/45)]);
            subel.style.position="relative";
            subel.style.left=0; 
            subel.style.top=0;
        }
        abilitys[Math.round((event.clientY - 120) / 45)] = el.id;
        alert(abilitys);
    }       
}

    for(var i = 0; i < 64; i++){                                                                                                           
       document.write("               
    <div onmousedown='mouseDown(this);'
        onmouseout='mouseOut(this);'
        onmousemove='mouseMove(el);'
        onmouseup='mouseUp(this, i);'
        id='"+i+"'
        class='abilityblock"+abilitytypes[i]+"'>
        <div class='abilityicon' style='background-position:"+(Math.floor(i/8)*-20)+"px "+((i%8)*-20)+"px;'></div>
        <div class='abilityname' style='color:"+abilitycolors[Math.floor(i/8)]+";'>"+abilitynames[i]+"</div>                           
    </div>");
}
</script>

呸。毕竟，我猜您缺少“left”和“top”参数是因为您动态计算的元素 ID 在 mouseup 处理程序中生成了不存在的 ID。

我的建议？废弃这种自制的拖放功能，使用 Mootools 或 jQuery 提供的功能。麻烦少得多，尤其是在必须处理跨浏览器差异时。