Question

任何人都知道为什么这不起作用？我想把听众添加到孩子而不是身体，这样我以后可以禁用某些击键（如返回键）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function test(){
    var divs = document.getElementsByTagName('div');
    for(i in divs){
        divs[i].onkeydown=function(event){alert('ok:'+event)}
    }
}
</script>
</head>

<body onload='test()' contentEditable ="true">
<div>test 1</div>
<div>test 2</div>
<div>test 3</div>
</body>
</html>

更新：

最好是，如果我把监听器放在父标签上，有没有办法防止冒泡到子div？我基本上需要在此设置中偶尔禁止返回休息。

Answer 1

你已经让身体可以编辑但不是孩子，因此你永远无法捕捉到孩子的击键。让孩子们可以编辑而不是身体。

http://jsfiddle.net/Kai/sDdN3/

*更新了小提琴以包括向上/向下箭头支持（请参阅注释）

Answer 2

将你的div包装在另一个div中，使其内容可编辑并将监听器放在其上：

<script>
function test(){
    var div = document.getElementById('container');
    div.onkeydown = function(event) {
            event = event || window.event;
            alert('ok: ' + event)
        };
    }
}
</script>


<body onload='test()'>
  <div id="container" contentEditable ="true">
    <div>test 1</div>
    <div>test 2</div>
    <div>test 3</div>
  </div>
</body>

动态onkeydown无法处理具有contentEditable父级的子级

2 个答案: