Question

<html>
    <head>
        <style>
            body
            {
                margin:0;   
            }
            .container
            {
                display:table;
                width:100vw;
                height:100vh;
                position:absolute;
                background:#000;
            }
            .helper
            {
                display:table-cell;
                vertical-align:middle;
            }
            .content
            {
                margin-left:auto;
                margin-right:auto;
                width:500px;
                height:200px;
                background:#FFF;
            }
        </style>
    </head>
    <body>
        <div class="container" onClick="alert('A')">
            <div class="helper">
                <div class="content" onClick="alert('C')">
                </div>
            </div>
        </div>
    </body>
</html>

当用户单击内容div时，我需要运行一些脚本，当用户单击容器div时，我需要运行另一个脚本。

但是当我点击内容div时，它会运行内容脚本和容器div。

如何在单击内容div时使其仅运行内容脚本。

由于

Answer 1

只需添加event.stopPropagation即可。以下是代码。

<div class="container" onclick="alert('A')">
            <div class="helper" id="content">
                <div class="content" onclick="alert('C') event.stopPropagation;">
                </div>
            </div>
        </div>
  </div>

This is jsfiddle link with solved problem

Answer 2

当您点击某个元素时，该事件会向上或向下移动。它取决于第3个参数（true或false）。基于此，您需要停止传播/冒泡停止在您希望它停止的元素。就这个。。。

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

如何只在内容上创建div onClick

2 个答案: