0

2 つの JavaScript イベントを含むページがあり、1 つはマウスからトリガーされ、もう 1 つはキーボードからトリガーされます。ページをロードすると、どちらか一方を機能させることができますが、両方を機能させることはできません。最初にキーを押すと、その機能は実行されますが、マウス クリックや別のキーストロークを行うことができません。およびその逆。jQuery を使用するとこれが簡単になることはわかっていますが、ユーザーにページごとにダウンロードさせたくないので、昔ながらの方法でこれを実行しようとしています。私は見つけられる限りJavaScriptイベントについて読んだことがありますが、私はこれで立ち往生しています...

前もって感謝します、ブラッド。注: Chrome と Safari では上記の結果が得られます。Firefox と Opera はキーストローク機能でのみ動作します

<html>
<head>
<script>
function create(event) {
var x=event.clientX-14;
var y=event.clientY-33;
var output = document.write("<p id=\"text\" style=\"background-color: white; position:    absolute; top:" + y + "px;left:" + x + "px;\";>You're Text, your M@jesty!</p>");
}
function type(event)
{
var letter_in = event.keyCode;
var letter = String.fromCharCode(letter_in);
//var shift = event.shiftKey;
//if (shift === false) {letter = String.toLowerCase;}
document.write(letter);
}
</script>
</head>

<body onmousedown="create(event)" onkeydown="type(event)">

</body>
</html>
4

1 に答える 1

0

document.write()これは、ハンドラを含め、ページ上の他のすべてをクリアする which を使用しているためです。

document.write()ドキュメントがロードされた後に呼び出すと、暗黙的に が呼び出され、ドキュメントがクリアdocument.open()されます。

したがって、これを修正するにinnerHTMLは、ページ内の要素のコンテンツのみを更新するようなものを使用する必要があります。

この例を参照してください：

<html>
  <head>

  </head>

  <body onmousedown="create(event)" onkeydown="type(event)">
    <div id="foo"></div>

    <script>
      function create(event) {
        var x=event.clientX-14;
        var y=event.clientY-33;
        var output = document.getElementById("foo").innerHTML = "<p id=\"text\" style=\"background-color: white; position:    absolute; top:" + y + "px;left:" + x + "px;\";>You're Text, your M@jesty!</p>";
      }
          function type(event)
          {
            var letter_in = event.keyCode;
            var letter = String.fromCharCode(letter_in);
            //var shift = event.shiftKey;
            //if (shift === false) {letter = String.toLowerCase;}
            document.getElementById("foo").innerHTML = letter;
          }
    </script>
  </body>
</html>
于 2012-12-15T00:55:53.513 に答える