Question

在之前的一个问题中，我询问过如何从父母那里切换一个儿童div，答案是否正常。现在我有一个不同的问题：当我点击内部的任何地方（例如链接“内部div”内部时，它会导致外部div切换。我希望内部div只能自行切换。如果我按照描述点击，那么包含“This is the inner div”的div应该消失，但类openData应该对外部div有效。而是将它设置为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>

我读到的所有内容都说我需要停止点击传播（我认为我正确地做了）。

这是最小的工作失败示例。实际程序显示彼此嵌套的可扩展数据集。

Answer 1

尝试将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();
    })
}

Answer 2

编辑：似乎问题是你正在向窗口事件调用stopPropagation，而不是你正在点击的实际元素。

您最有可能参加事件冒泡教程（至少如果我理解正确的话）。请检查一下，因为它描述了您的问题：

http://javascript.info/tutorial/bubbling-and-capturing

以速记来阻止内部事件传播到外部div使用：

event.stopPropagation()

以及之前的IE9：

event.cancelBubble = true

Answer 3

如果只有外部div函数触发，请尝试在内部div上设置一个高于父div的z-index。

将事件明确传递给您的函数

Onclick="function(event || window.event, this)"

然后在您的函数上为事件添加一个参数，并对其执行事件传播取消。

如何在另一个可点击的div中嵌入一个可点击的div

3 个答案: