这个JavaScript在鼠标悬停上失败

Question

任何人都可以找出为什么这个JavaScript不起作用？它正确地生成document.write输出，但是当您尝试拖动它时，它开始抱怨top和left没有被设置。任何想法什么是错的？

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

搜索你的代码，你还没有定义一个onmouseover事件。您可以定义onmousedown，onmouseout，onmousemove和onmouseup。没有onmouseover。

Answer 2

我可能已经打破了脚本只是想收拾这个烂摊子邪恶和简化的东西一点，但至少它似乎更具可读性现在有点（不包括数组定义）：

<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> 

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

我的建议？将这个家庭酿造的东西拖放下来，并使用Mootools或jQuery提供的功能。更少的麻烦，尤其是在处理跨浏览器差异时。