2015-10-31 21 views
0

不工作我想創建一個小的JavaScript件,即:添加字母上的鼠標光標爲Firefox

1)讓我們選擇通過單擊一個字母就可以了或者按下鍵盤上的鍵

2)在一個指定區域leftclick增加信鼠標光標,並且如果按下Alt鍵將刪除信

3)高亮顯示選擇/點擊或按下

的時清除所述選擇代碼到目前爲止工作正常大部分,但只在Chrome中。 Firefox強調點擊,但否則拒絕參與。

var letter = ""; 
var index = 1; 
var buchstaben = document.getElementsByClassName("buchstabe"); 

function blackmailer(){ 
    // get mouse coordinates 
    var clientx = event.layerX; 
    var clienty = event.layerY; 

    //create a div, give it an id that is stored in index 
    var tag = document.createElement("div"); 
    tag.setAttribute("id", index); 
    tag.setAttribute("class", "bStabe"); 
    // Listener to remove div, if clicked while holding ALT 
    tag.addEventListener("mousedown", function(){ 
     if(event.altKey){ 
      var parent = document.getElementById("check"); 
      parent.removeChild(this); 
     } 
    }); 
    // set position absolute and give it mouse coordinates (puts it on mouse position) 
    tag.style.position="absolute"; 
    tag.style.left= (clientx-5) + "px"; 
    tag.style.top = (clienty-15) + "px"; 

    // add text to div element 
    var text = document.createTextNode(letter); 
    tag.appendChild(text); 
    var element = document.getElementById("check"); 
    element.appendChild(tag); 


    index +=1; 
}; 

function clearSelections(){ 

    for(var i = 0; i<buchstaben.length;i++){ 
     buchstaben[i].style.background = "white"; 
     changeLetter(""); 
    } 
}; 

function keyboardTaste(){ 

    /* 
    * Create letter of keypress and store it in aLetter 
    */ 
    var x = event.which; 
     x = event.keyCode; 
    var aLetter = String.fromCharCode(x); 
    /* 
    * get div with the ID of aLetter 
    */ 
    var letterDiv =document.getElementById(aLetter); 

    // Clear all previous Selections 
    clearSelections(); 

     /* 
     * Loop through all elements of the array, get the id of the 
     * array at position 'i'. 
     */ 

    for(var i = 0; i<buchstaben.length; i++){ 
     var idtag = buchstaben[i].id; 
     /* 
     * if the id is the same as the pressed letter AND the pressed key 
     * is different from the stored variable "letter", change the background 
     * color (mark active) of the div element and change the stored letter 
     * to the pressed letter 
     */ 
     if(idtag === aLetter && letter != aLetter){ 
      letterDiv.style.background = "red"; 
      changeLetter(aLetter); 
      break;} 

     /* 
     * if the stored letter is the same as the letter pressed, 'deselect' the 
     * letter 
     */  
     else if(aLetter === letter){ 
       clearSelection(); 
       changeLetter(""); 
       break;} 
      } 

    }; 

function mausSelektion(banana){ 

    if(banana != letter){ 
     clearSelections(); 
     document.getElementById(banana).style.background="red"; 
     changeLetter(banana); 
    } 
    else 
    if(banana === letter){ 
     clearSelections(); 
     changeLetter(""); 
    }}; 




function changeLetter(banana){ 
    letter = banana; 
}; 



function changeLetter(banana){ 
    letter = banana; 
}; 

該HTML文件包含區域'check',其中將添加字母。

它還包含用於樣式目的的「容器」框中的所有字母,用於選擇腳本。

<!DOCTYPE HTML> 
<head> 
    <title>Testseite</title> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
    <script src="myscripts.js" type="text/javascript"></script> 
    <script src="aufg_1.js" type="text/javascript"></script> 
</head> 
<html> 
    <body id="body" onmousemove="test()" onkeypress="keyboardTaste()"> 

      <div id="gluedOn" > 
       this be glued onto the mouse 
       </div> 


      <div id="check" onclick="blackmailer()"> 

      </div> 

      <div id="letterbox"> 
       <div class="buchstabe" id="a" onclick="mausSelektion(this.id)">A</div> 
       <div class="buchstabe" id="b" onclick="mausSelektion(this.id)">B</div> 
       <div class="buchstabe" id="c" onclick="mausSelektion(this.id)">C</div> 
       <div class="buchstabe" id="d" onclick="mausSelektion(this.id)">D</div> 
       <div class="buchstabe" id="e" onclick="mausSelektion(this.id)">E</div> 
       <div class="buchstabe" id="f" onclick="mausSelektion(this.id)">F</div> 
       <div class="buchstabe" id="g" onclick="mausSelektion(this.id)">G</div> 
       <div class="buchstabe" id="h" onclick="mausSelektion(this.id)">H</div> 
       <div class="buchstabe" id="i" onclick="mausSelektion(this.id)">I</div> 
       <div class="buchstabe" id="j" onclick="mausSelektion(this.id)">J</div> 
       <div class="buchstabe" id="k" onclick="mausSelektion(this.id)">K</div> 
       <div class="buchstabe" id="l" onclick="mausSelektion(this.id)">L</div> 
       <div class="buchstabe" id="m" onclick="mausSelektion(this.id)">M</div> 
       <div class="buchstabe" id="n" onclick="mausSelektion(this.id)">N</div> 
       <div class="buchstabe" id="o" onclick="mausSelektion(this.id)">O</div> 
       <div class="buchstabe" id="p" onclick="mausSelektion(this.id)">P</div> 
       <div class="buchstabe" id="q" onclick="mausSelektion(this.id)">Q</div> 
       <div class="buchstabe" id="r" onclick="mausSelektion(this.id)">R</div> 
       <div class="buchstabe" id="s" onclick="mausSelektion(this.id)">S</div> 
       <div class="buchstabe" id="t" onclick="mausSelektion(this.id)">T</div> 
       <div class="buchstabe" id="v" onclick="mausSelektion(this.id)">V</div> 
       <div class="buchstabe" id="w" onclick="mausSelektion(this.id)">W</div> 
       <div class="buchstabe" id="x" onclick="mausSelektion(this.id)">X</div> 
       <div class="buchstabe" id="y" onclick="mausSelektion(this.id)">Y</div> 
       <div class="buchstabe" id="z" onclick="mausSelektion(this.id)">Z</div> 
       <div class="buchstabe" id="ß" onclick="mausSelektion(this.id)">ß</div> 
      </div> 
    </body> 
</html> 

我沒有跨瀏覽器編程的經驗,所以任何提示將不勝感激!如果可能的話,它應該是純粹的JavaScript,但最終功能更重要。規模的香蕉。

回答

0

在諮詢了Firefox的Web控制檯之後,這段代碼會創建很多「參考錯誤 - 未定義」。

要解決所有瀏覽器的問題,有必要爲函數創建(事件)參數。

像這樣:

function blackmailer(event){ } 

而且coresponding HTML:

<div id="check" onclick="blackmailer(event)"> 

這是必要的,因爲我們所說的

event.screen 

爲 '事件' 的工作,我們實際上必須給該功能一個參數,即事件。這解決了我的問題。