如何在一個HTML文檔中使用多個JavaScript事件？

我有一個頁面有2個javascript事件，一個是用鼠標觸發的，另一個是從鍵盤觸發的。當我加載頁面時，我可以使用其中一個或另一個工作，但不能同時使用。如果我先按下一個鍵，該功能將會運行，但是我不能點擊鼠標或另一個按鍵。反之亦然。我知道jQuery使這更容易，但我寧願沒有我的用戶下載每個頁面，所以我試圖以舊式的方式做到這一點。我已經閱讀了儘可能多的關於JavaScript事件，我可以找到，但我卡在這裏與這一個...如何在一個HTML文檔中使用多個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 [email protected]!</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>

來源

2012-12-15 B Rad C

你真的應該考慮使用jQuery。 – BenM

@BenM：「我知道jQuery使這更容易，但我寧願沒有我的用戶下載每個頁面」。沒有jQuery，OP想要做什麼很容易。 –

對不起，錯過了。這裏遲到了！ – BenM

這是因爲你使用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 [email protected]!</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-15 00:55:53 sachleen

非常感謝！這就是我正在尋找的東西;我取消註釋type（）函數中的行來創建小寫字母。它使用shift鍵創建大寫字母，但是當shift鍵未被按下時不是創建小寫字母，而是輸出「undefined」，您知道嗎？再次感謝。 –

如何在一個HTML文檔中使用多個JavaScript事件？

回答

相關問題