這個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提供的功能。更少的麻煩，尤其是在處理跨瀏覽器差異時。