javascript - 解决在嵌套的contenteditable div中input事件触发异常?
<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。
共有1个答案
<!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>-
问题内容： 我已使用将事件附加到文本框。它工作正常。当我想通过另一个函数以编程方式触发事件时，出现了我的问题。 我该怎么做？ 问题答案： 您可以在IE 8或更低版本上使用fireEvent，在大多数。要创建您要触发的事件，可以使用或取决于浏览器。 这是一段不言自明的代码（来自原型），它在上触发事件：
-
问题内容： TL; DR我正在寻找一种让一个线程在另一个线程中引发事件的方法 编辑： 我说“立即”一词，正如一些评论家指出的那样，这是不可能的。我的意思是，如果gui线程处于空闲状态，则应该在毫秒到十亿分之一秒的范围内相当快地发生（这应该是正确的，如果我做对的话）。 案例示例： 我有一个具有Parent类的项目。该Parent类创建一个子线程“ Gui”，该子线程包含一个javafx应用程序并实现
-
本文向大家介绍jquery中trigger()无法触发hover事件的解决方法，包括了jquery中trigger()无法触发hover事件的解决方法的使用技巧和注意事项，需要的朋友参考一下 今天做一个项目，遇到了一个问题，是以前没有遇到过的，就此记上一笔。 1、trigger方法解释 官方是这么解释的： 用法： .trigger( eventType [, extraParameters] )
-
本文向大家介绍javascript移动开发中touch触摸事件详解，包括了javascript移动开发中touch触摸事件详解的使用技巧和注意事项，需要的朋友参考一下 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！ W3C DOM把事件对象作为事件处理函数的第一个参数传入进去 IE将
-
本文向大家介绍如何在javascript中手动触发onchange事件？，包括了如何在javascript中手动触发onchange事件？的使用技巧和注意事项，需要的朋友参考一下 您可以使用dispatchEvent方法在单个元素上调度事件。假设您有一个带有onChange事件的元素测试- 事件处理程序- 手动触发事件- 这将记录以下内容-
-
问题内容： 当有人 使用鼠标在页面上 选择给定的文本片段时， 如何 触发JavaScript函数 ？ 另外，有什么方法可以 找到所选文本 在页面上的 位置 吗？ 更新：更清楚地说，文本片段可以是句子或单词或短语的一部分，也可以是整个段落。 问题答案： 没有“ 选择了文本 ” 事件，但是您可以将事件绑定到。在该事件处理程序中，您可能只需检查 要么 方法。关于Stackoverflow有几个主题，例如
-
本文向大家介绍input标签内容改变的触发事件介绍，包括了input标签内容改变的触发事件介绍的使用技巧和注意事项，需要的朋友参考一下 1. onchange事件与onpropertychange事件的区别： onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是I
-
使用mui.trigger()方法可以动态触发特定DOM元素上的事件。 .trigger( element , event , data ) element Type: Element 触发事件的DOM元素 event Type: String 事件名字，例如：'tap'、'swipeleft' data Type: Object 需要传递给事件的业务参数 示例 自动触发按钮的点击事件： var