如何仅在内容上制作 div onClick [重复]

Posted

技术标签:

【中文标题】如何仅在内容上制作 div onClick [重复]【英文标题】：How to make div onClick at the content only [duplicate] 【发布时间】：2016-01-27 21:48:24 【问题描述】： 
<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 时运行内容脚本。

谢谢

【问题讨论】：

Event.stopPropagation() 【参考方案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

【讨论】：

它只运行 alert('A')，我想让它只在点击内容 div 时运行 alert('C') 它的工作。它只缺少“;”在“event.stopPropagation”之后的“alert（'c'）”和“（）”之后谢谢【参考方案2】：

当您单击一个元素时，事件会向上或向下移动。它取决于第三个参数（真或假）。基于此，您需要停止传播/冒泡以在您希望它停止的元素处停止。就这个 。 . .

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

【讨论】：

以上是关于如何仅在内容上制作 div onClick [重复]的主要内容，如果未能解决你的问题，请参考以下文章

OnClick on div 元素仅在其中一部分起作用

带有php的引导网格[重复]

如何制作侧面导航栏并让div填充其余空间[重复]

如何制作2个内联div，一个是其内容的宽度，第二个是父级剩余空间的宽度[重复]

jQuery从按钮onclick跳转或滚动到页面上的某个位置，div或目标[重复]

聚合物重复模板问题