0

我有一个包含 2 个 javascript 事件的页面，一个由鼠标触发，另一个由键盘触发。当我加载页面时，我可以让一个或另一个工作，但不能同时工作。如果我先按一个键，该功能将运行，但随后我无法进行鼠标单击或其他按键操作。反之亦然。我知道 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 回答