js阻止冒泡问题？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="outDiv" style="width: 100px; height: 200px; background-color: bisque;" contenteditable="true">
    外
    <div id="innerDiv" style="width: 50px; height: 100px; background-color: aquamarine;" contenteditable="true" oninput="handler2(event)">内</div>
  </div>
</body>
<script>
  function handler1(e) {
    console.log('外', e.target)
  }
  function handler2(e) {
    console.log('内', e.target)
    e.stopPropagation()
  }
  // document.getElementById('outDiv').addEventListener('input', handler1)
  // document.getElementById('innerDiv').addEventListener('input', handler2)
</script>
</html>

在以上代码中，当我在innerDiv中输入时，handler2无法触发，handler1总是触发

尝试过在handler2中阻止了事件冒泡，但是似乎因为handler2触发都没触发，所以e.stopPropagation()也无效，我想得到的结果是，在innerDiv中输入时，只触发handler2,在outDiv中输入时，只触发handler1,应该如何优化？

阅读 376

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡示例</title> </head> <body> <div id="outerDiv" style="padding: 20px; background-color: lightblue;"> Outer Div <div id="innerDiv" style="padding: 20px; background-color: lightcoral;"> Inner Div </div> </div> <script> document.getElementById('outerDiv').addEventListener('click', function() { alert('Outer Div Clicked'); }); document.getElementById('innerDiv').addEventListener('click', function(event) { alert('Inner Div Clicked'); event.stopPropagation(); // 阻止事件冒泡 }); </script> </body> </html>

js阻止冒泡问题？

你尚未登录，登录后可以

省市区街道数据在哪里可以下载？

js 如何将Key属性相同的放在同一个数组？

两个promise问题？

如何自定义设置虚线边框的样式？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

前端页面脚本更新时，如何让用户端，使用最新脚本？