javascript - 动态 onkeydown 不适用于父级为 contentEditable 的子级

标签 javascript html

有人知道为什么这不起作用吗?我试图将听众添加到 child 而不是 body ,这样我以后可以禁用某些击键(如返回键)。

<!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?我基本上需要偶尔禁止在此设置中返回中断。

最佳答案

您已将正文设为可编辑,但子项不可编辑,因此您将永远无法捕捉子项的击键。让 child 而不是 body 可编辑。

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

*更新 fiddle 以包括向上/向下箭头支持(见评论)

关于javascript - 动态 onkeydown 不适用于父级为 contentEditable 的子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7720630/

相关文章:

javascript - jquery 中 .removeClass() 的参数定义是什么

javascript - react : event bubbling through nested components

javascript - 触摸键盘外部时禁用 Firefox OS 键盘自动隐藏

html - 简单的 flex 问题 - 为什么 flex 元素的大小不一样,没有设置 flex 基础

javascript - 需要帮助数据与 Observables 的 Angular 绑定(bind)

javascript - 通过单击按钮更改加载到表中的 JSON 文件

javascript - 将数组值赋给变量

html - 通过选择子项将样式应用于父项

html - 双列,其中第二列自动调整其宽度

php - WP 触摸小部件