在上一个问题中，我问过要从父级切换子级div的问题，并给出答案。现在，我遇到了另一个问题：当我单击内部div中的任何位置时（例如链接“ inside inner div”，它都会导致外部div切换。我希望内部div仅自己进行切换。如果按说明单击，则包含“这是内部div”的div应该消失，但外部div的类openData应该处于活动状态，而是将其设置为closeData。
这是我的代码：
<html>
<head>
<style>
.openData{font-size:18px;background-color:lightgreen;color:blue;}
.closeData{font-size:18px;background-color:lightblue;color:blue;)
</style>
<script src="/js/jquery.js"></script>
<script>
function insideDiv(f) {
var e=window.event;
e.cancelBubble=true;
e.stopPropagation();
toggleDiv(f);
return false;
}
function setCursor(e) {
e.style.cursor="pointer";
}
function clearCursor(e) {
e.style.cursor="default";
}
function togglePlusMinus(f) {
$(f).children('div:first').toggle();
$(f).toggleClass("openData closeData");
}
</script>
</head>
<body>
<div class="closeData" onmouseover="setCursor(this);" onmouseout="clearCursor(this);" onclick="togglePlusMinus(this);">This is the outer div
<p>Inside outer div</p>
<div style="display:none;;background-color:#ffffff;" onclick="insideDiv(this);">This is the inner div
<div>
<p style="margin-left:20px;margin-top:0px;font-size:15px">inside inner div</p>
</div>
</div>
<p>Also in outer div</p>
</div>
This is just some trailing text.
</body>
</html>
我读过的所有内容都表明我需要停止点击传播（我认为我做得正确）。
这是最小的工作故障示例。实际程序显示了彼此嵌套的可扩展数据集。
最佳答案
尝试将eventListener添加到内部div中，并像在父级中一样使用stopPropagation。
var myDiv = document.querySelector('#myDiv'); //assuming your child div has a "myDiv" id
myDiv.addEventListener(pEvent) {
pEvent.stopPropagation();
};
编辑：
要使其与每个.closeData元素的每个第一个子div一起工作（假设您只有一个直接子div）：
//Selects all .closeData elements
var parents = document.querySelectorAll('.closeData');
//For each .closeData, find the first div and stops the propagation
for(var i = 0; i < parents.length; i++) {
var child = parents[i].querySelector('div');
child.addEventListener('click', function(pEvent) {
pEvent.stopPropagation();
})
}