问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

解决在嵌套的contenteditable div中input事件触发异常?

头像
mjlf23
    123
    头像
    乔治
      12.7k1329
      新手上路，请多包涵
      <div id="outDiv" style="width: 100px; height: 200px; background-color: bisque;" contenteditable="true" oninput="handler1(event)" :tabindex="0">
 外
  <div id="innerDiv" style="width: 50px; height: 100px; background-color: aquamarine;" contenteditable="true" oninput="handler2(event)" :tabindex="1">内
   </div>
</div>
<script>
  function handler1(e) {console.log('外', e.target)}
  function handler2(e) {console.log('内', e.target);e.stopPropagation();}
</script>

      如上的嵌套div，都开启了contenteditable，但在innerDiv中输入内容，input事件，永远只触发了outDiv的handler1，handler2则从未触发过。
      想要在innerDiv中输入时，只触发handler2，其它地方输入则触发handler1，需要怎么解决？

      1、对内外层的div开启不同的事件，如内外层都监听keyup、keydown、input中的一种，且不重复，但还是只触发外层div的handler1；
      2、把内层的contenteditable去掉，也同样是只触发handler1。

      javascripthtmldomcontenteditableevent-propagation
      阅读 286
      1 个回答
      得票最新
      头像
      乔治
        12.7k1329

        1737442183585.png

        <!DOCTYPE html>
<html>
<head>
    <style>
        #outDiv {
            width: 100px;
            height: 200px;
            background-color: bisque;
        }
        #innerDiv {
            width: 50px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="outDiv" contenteditable="true">
        外
        <div id="innerDiv" contenteditable="true">内</div>
    </div>

    <script>
        const outDiv = document.getElementById('outDiv');
        
        outDiv.addEventListener('input', (e) => {
            // 判断实际触发input事件的元素
            const targetElement = e.target;
            
            if (targetElement.id === 'innerDiv') {
                console.log('内层输入:', targetElement);
                e.stopPropagation();
            } else if (targetElement.id === 'outDiv') {
                console.log('外层输入:', targetElement);
            }
        });
    </script>
</body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏