Question

我想创建一个小小的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文件包含“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，但最终功能更重要。香蕉的规模。

Answer 1

在咨询firefox Web控制台之后，此代码将创建大量＆＃34;参考错误 - 未定义＆＃34;。

要解决所有浏览器的问题，必须为函数创建（事件）参数。

像这样：

    function blackmailer(event){ }

相应的HTML：

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

这是必要的，因为我们称之为

event.screen

对于＆＃39;事件＆＃39;为了工作，我们实际上必须给函数一个参数，这是一个事件。这解决了我的问题。

在鼠标光标上添加字母对Firefox不起作用

1 个答案: