addEventListener和attachEvent如何工作？ Keydown和Keyup不能正常工作

问题描述：

我为mozilla的“shift key”keydown和keyup事件写了一段代码，但它并没有像我期望的那样工作。代码：addEventListener和attachEvent如何工作？ Keydown和Keyup不能正常工作

<html> 
<head> 
<title>Testing Page</title> 
<script type="text/javascript"> 
var key_capslock = 0; 
var key_shift = 0; 

function print1(){ window.alert("shift status" + key_shift);} 
function print2(){ window.alert("shift status" + key_shift);} 
function keyset(evt){ 
    evt.preventDefault(); 
    if(evt.keyCode == 16){ 
    if(key_shift == 0){key_shift = 1; evt.stopPropagation();} 
    else {key_shift = 0; evt.stopPropagation();} 
    } 
print1(); 
return; 
} 
function keyrelease(evt){ 
    evt.preventDefault(); 
    if(evt.keyCode == 16){ 
     if(key_shift == 0){key_shift = 1; evt.stopPropagation();} 
     else {key_shift = 0; evt.stopPropagation();} 
    } 
print2(); 
return; 
} 

function init(){ 
document.body.setAttribute("contentEditable", true); 
document.body.addEventListener("keydown", keyset, false); 
document.body.addEventListener("keyup", keyrelease, false); 
} 
</script> 
</head> 
<body onload="init()"> 
<br> 
<body> 
</html>

步骤：1.按shift键（KEYDOWN和KeyUp事件发生）。 2.警报带有换档状态（print1函数运行）。我点击它。预期：警报应该与换档状态（print2功能应运行）。实际：print2函数不运行。

如果我第二次按shift键然后print2函数运行。我不明白mozilla如何处理addEventListener函数。有人可以帮我解决这个问题吗？我不想使用任何第三方框架来解决这个问题（jQuery的，道场等）。

感谢

答

您的代码实际上是很好，但警报消息把焦点从浏览器，防止其检测keyup。

如果更改的功能写入一个div，例如，你会看到，这两种职能的工作：

http://jsfiddle.net/jtbowden/VqNvG/

虽然，我不明白这个代码：

if(key_shift == 0){key_shift = 1; evt.stopPropagation();} 
else {key_shift = 0; evt.stopPropagation();}

如果您在keyset，key_shift应该始终为1，而不是切换：

function keyset(evt){ 
    evt.preventDefault(); 
    if(evt.keyCode == 16){ 
    key_shift = 1; 
    evt.stopPropagation(); 
    } 
    print1(); 
    return; 
} 
function keyrelease(evt){ 
    evt.preventDefault(); 
    if(evt.keyCode == 16){ 
     key_shift = 0; 
     evt.stopPropagation(); 
    } 
    print2(); 
    return; 
}

addEventListener和attachEvent如何工作？ Keydown和Keyup不能正常工作

相关推荐