Question

我制作了一个九箱格子。单击这九个框中的任何一个，单击一个，占据整个网格的空间，并在其中显示一些信息。现在，我还在每个网格的右上角做了一个十字架，在点击时，它意味着将网格折叠到原始大小并占据其先前的位置。我已经为它编写了纯JavaScript代码，并且在浏览器中检查代码表明代码没有任何问题。但是，我的十字按钮似乎不起作用。下面，我已经提到了我编写的JS函数。这是jsFiddle：https://jsfiddle.net/ag_dhruv/wx7en2kx/
这是包含我的页面的文件夹：goo.gl/Qiafc7

function expand (x) {
var tester = x.className.substr(5,7);
if(tester != "ex"){
x.className = x.className+"ex";
var cross = x.getElementsByClassName('cross');
for (var i = 0; i < cross.length; i++) {
    cross[i].className = "crossshown";
};
var icon = x.getElementsByClassName('boxfortitle');
for (var j = 0; j < icon.length; j++) {
    icon[j].className = "boxfortitlebig";
};
var info = x.getElementsByClassName('info');
for (var k = 0; k < info.length; k++) {
    info[k].className = "infoshown";
};
x.id="opened";
}
}

function collapse (y) {
var classOfParent = y.parentNode.className;
var newClassName = classOfParent.substr(0,5);
y.parentNode.className = newClassName;
}

Answer 1

发现你的错误。 expand(this)绑定到整个框，因此当您单击x时，它会调用collapse（）然后展开（），从而不会发生净更改。

你的代码到处都是;清理，这应该使这个错误容易修复。

Answer 2

在collapse()函数中，您的事件为Bubbling through the DOM，导致expand()函数在collapse()函数运行完毕后直接调用。因为在子元素上调用onclick，然后在父元素上调用onclick。所以它会立即再次打开。

而不是将this传递给collapse()传递事件对象。

E.g collapse(event);

事件对象上有一个名为stopPropagation()的函数，如果你在函数的底部调用它，它将阻止这种情况发生。

function collapse (event) {
    var classOfParent = event.currentTarget.parentNode.className;
    var newClassName = classOfParent.substr(0,5);
    event.currentTarget.parentNode.className = newClassName;
    event.stopPropagation();
}

当我测试这个时，在鼠标事件中你需要做一些更直观的事情。但希望这会有所帮助。

其他信息：事件冒泡和传播
这是我的理解。鼓泡和传播是一回事。这与事件如何在DOM中移动有关。想象一下像水下泡泡这样的事件，无论你有多深，泡沫都要浮出水面。

<div onclick="onParentClick(event);">
    <img src="img.jpg" alt="logo" onclick="onChildClick(event);" />
</div>

如果您点击儿童img，则会调用它onclick，并且该方法完成后 （水下气泡） 必须将其设置为body元素 （曲面） ，因此其自身与onclick元素之间的任何body都将被叫到它到达顶部。这只会影响父母和孩子的兄弟姐妹事件。如果您仅单击父div，它将遵循相同的步骤，但不会调用子div onclick，因为气泡只会向上浮动。

Event的每个实例都有一个名为bubbles的属性，一个布尔值，它告诉你事件是否会继续使用DOM树。

您有三种主要方式与事件实例进行交互，以使其执行除默认行为之外的其他操作。

event.stopPropagation();停止为此特定事件冒泡DOM的事件。 E.g停止onclick而不是mouseup的传播。

event.stopImmediatePropagation();停止事件冒泡和该元素上的任何其他事件侦听器。 E.g调用此方法将阻止在mouseup之后触发onclick。

event.preventDefault();停止默认浏览器功能。例如，如果您要阻止浏览器对<a>标记做出反应，并在其上添加onclick个标记。

Answer 3

每次调用折叠时调用expand。您还需要为所有折叠方法传递“this”

编辑您的展开并将其添加到开头

if(x.getAttribute("id")!="opened"){
    ...
}

这需要进一步的逻辑编辑。 或使用onclick="collapse(this); event.stopPropagation();"来阻止解雇父事件

Answer 4

cross元素上的click事件会传播到父元素，在那里它也会触发click处理程序（expand）。解决问题的一种方法是停止事件传播。

<div class="cross" onclick="collapse(this); event.stopPropagation();" >

JavaScript - 通过更改类名

4 个答案: