javascript - Div 的相互点击？

Question

我有一个包含的 div，它本身充当一个按钮...

点击时，我将其设置为展开并显示更多信息，同时在右上角显示一个关闭按钮...

现在，当我点击关闭按钮时，关闭函数会执行，而且 div 的 onclick 也会打开，所以最终结果是，好吧......没有任何反应......

大声笑...

fiddle 的例子也不管用，我快没脑子了...

http://jsfiddle.net/VeyeY/5/

Answer 1

您可以从 onclick 返回 false 以关闭 div。这将确保不会传播点击事件。

另一种解决方案是对事件本身调用 preventDefault() 和 stopPropagation()。这也将确保事件不会继续进行。

编辑:

在所有发生的事件(onclick、onchange、onmouseover 等)中，总有一个可能的事件变量，您可以根据需要忽略它，或者从中提取信息。在您的示例中，我认为使用事件变量的最简单方法是执行如下操作:

<div id="inner" onclick="toggle(false); event.preventDefault(); event.stopPropagation();">

现在这看起来有点难看，你真的不想在 html 标记中处理这个，所以另一种选择是像这样将事件变量传递给你的函数:

<div id="inner" onclick="toggle(event, false)">

然后在 javascript 中:

function toggle(event, x){
    // Do your thing

    event.preventDefault();
    event.stopPropagation();
}

事件变量可以做很多事情。例如，您可以检查发起事件的节点，而不是将 true 或 false 传递给您的函数:

if(event.originalTarget.id == "inner"){
    // Inner was clicked
}else if(event.originalTarget.id == "outer"){
    // Outer was clicked
}