div嵌套之 onkeydown 事件触发问题，子Div不触发 onkeydown

截图如下：

测试代码如下：


<html>
<title>事件问题</title>

<head>
</head>

<body>
    <div contenteditable="true" style="width: 600px; height: 500px; background-color:cyan;" onkeydown="fnKeydownFather(event)">
        <div>这是一个可编辑的Div父盒子，里面有很多子Div盒子</div>
        <div>子Div.001</div>
        <div>子Div.002</div>
        <div>子Div.003</div>
        <div contenteditable="true" tabindex="-1"  style="height: 40px; background-color:greenyellow;" onkeydown="fnKeydownSon()">
            这个子Div的onkeydown事件不触发（请按键盘的上下左右将光标移到这里来）
        </div>
        <div>子Div.005</div>
        <div>子Div.006</div>
        <div>.........................</div>
        <div>我希望两个事件都能同时触发</div>
    </div>

</body>

</html>
<script>
    //键盘事件.父Div
    function fnKeydownFather(evt) {
        var theEvent = window.event || evt;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        console.log("父Div.按键代码：" + code);
    }
    //键盘事件.子Div
    function fnKeydownSon(evt) {
        var theEvent = window.event || evt;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        console.log("子Div.按键代码：" + code);
    }
</script>

PS：如果将子Div的 onkeydown 换成 onclick ，就能正常触发，这又是什么原因呢？！

子Div里，我加上了contenteditable="true" tabindex="-1" 属性，但还是无效！

请教怎么修改代码才能让两个事件都触发？！！

不管什么方法，只要能让子Div能监听到onkeydown 事件就可以了。

键盘事件只能由 , 以及任何具有 contentEditable 或 tabindex="-1"属性的组件触发。</p>

鼠标事件传递方式：点击位置的DOM -> 父节点 -> 父节点。。。
按键事件传递方式：当前焦点DOM -> 父节点 -> 父节点。。。
所以你要让你的子DIV获取焦点，这样子DIV和父DIV都能触发按键事件了
方法一，把父DIV的 contenteditable="true" 去掉，子DIV保留，这样鼠标点击子DIV时可以让子DIV取得焦点
方法二，调用子DIV.focus()方法，可以让子DIV取得焦点

试试在父函数中触发子函数

这个其实就要了解一下onkeydown 事件了，这个是键盘事件，只有按下键盘才会触发该事件，而该事件触发，只包括在于该节点本身以及父级元素，而不会触发同级元素的时间，也就是兄弟节点，是由内到外触发，而不是由外到内，但你说的onclick 鼠标点击事件，却是由外到内触发的

应该明白，为什么没有同时触发了吧

事件冒泡是可以捕获(子标签点击回传到父标签上,父标签没办法点击子标签上)

<html>
<title>事件问题</title>

<head>
</head>

<body>
    参考:https://blog.csdn.net/glgom/article/details/121422429
    <div contenteditable="true" style="width: 600px; height: 500px; background-color:cyan;"
        onkeydown="fnKeydownFather(event)">
        <div>这是一个可编辑的Div父盒子，里面有很多子Div盒子</div>
        <div>子Div.001</div>
        <div>子Div.002</div>
        <div>子Div.003</div>
        <div onkeydown="fnKeydownSon()" tabindex="1" style="height: 40px; background-color:greenyellow;">
            这个子Div的onkeydown事件不触发（请按键盘的上下左右将光标移到这里来）
        </div>
        <div>子Div.005</div>
        <div>子Div.006</div>
        <div>.........................</div>
        <div>我希望两个事件都能同时触发</div>
    </div>

</body>

</html>
<script>
    //键盘事件.父Div   
    function fnKeydownFather(evt) {
        var theEvent = window.event || evt;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        console.log("父Div.按键代码：" + code);
    }
    //键盘事件.子Div
    function fnKeydownSon(evt) {
        var theEvent = window.event || evt;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        console.log("子Div.按键代码：" + code);
    }
</script>

contenteditable="false"试试