【发布时间】：2015-11-01 00:13:11
【问题描述】：
我想创建一个小的 javascript 片段：
1) 让我们通过单击或按下键盘上的键来选择一个字母
2) 在指定区域左键单击将字母添加到鼠标光标，如果按下 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 文件包含“检查”区域，将在其中添加字母。
它还包含“容器”框中的所有字母，用于样式目的，调用脚本进行选择。
<!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，但最终功能更重要。香蕉的规模。
【问题讨论】：
标签： javascript html firefox cross-browser