如何在一个 HTML 文档中使用多个 javascript 事件？答案

【问题标题】：How to use multiple javascript events in one HTML doc?如何在一个 HTML 文档中使用多个 javascript 事件？
【发布时间】：2012-12-15 00:51:16
【问题描述】：

我有一个包含 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>

【问题讨论】：

你真的应该考虑使用 jQuery。
@BenM：“我知道 jQuery 让这一切变得更容易，但我不想让我的用户为每个页面下载它”。没有 jQuery，OP 想要做的事情很容易。
抱歉，错过了。来晚了！

标签： javascript events mouseevent keyevent

【解决方案1】：

这是因为您使用的是document.write()，它会清除页面上的所有其他内容，包括您的处理程序。

在加载文档后调用 document.write() 会隐式调用 document.open()，这会清除文档。

因此，要解决此问题，您需要使用 innerHTML 之类的东西来仅更新页面中元素的内容。

见this example:

<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>

【讨论】：

非常感谢！这正是我想要的；我取消了 type() 函数中用于创建小写字母的行的注释。它可以用 shift 键创建大写字母，但是当没有按下 shift 键时它不会创建小写字母，而是输出“未定义”你知道吗？再次感谢。