Javascript 两个不同的字符在两个div上单击，一个在另一个上

我有两个div，一个大的，另一个小的，每个div都有自己的OnClick方法。我遇到的问题是，当我单击较小的div时，也会调用大div的OnClick方法

---

我可以避免谁这样做？

您的问题是，

单击事件将向上传播元素树。因此，包含已单击元素的每个元素也将触发
click
事件

最简单的解决方案是添加
返回false
处理程序

如果您正在使用，可以调用
e.stopPropagation（）
否则，您需要调用
e.stopPropagation（）
如果它存在，并设置
event.cancelBubble=true

有关更多信息，请参阅。
如果您决定使用诸如www.jquery.com之类的javascript库，您可以通过使用传播预防选项轻松完成您试图完成的任务。
您要处理的是事件冒泡。请看这篇文章：

基本上，要阻止事件传递到父元素，可以使用以下方法：

document.getElementById('foo').onClick = function(e) {

    // Do your stuff

    // A cross browser compatible way to stop propagation of the event:
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

您遇到了事件传播的常见情况。查看以获得有关具体情况的完整详细信息。基本上，您需要在较小div的click处理程序中执行以下操作：

if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();

检测单击了哪个元素的最佳方法是分析事件的目标（单击事件）。我为这个案例准备了一个小例子。您可以在下面的代码中看到它

function amIclicked(e, element)
{
    e = e || event;
    var target = e.target || e.srcElement;
    if(target.id==element.id)
        return true;
    else
        return false;
}
function oneClick(event, element)
{
    if(amIclicked(event, element))
    {
        alert('One is clicked');
    }
}
function twoClick(event, element)
{
    if(amIclicked(event, element))
    {
        alert('Two is clicked');
    }
}
功能（e，元素）
{
e=e | |事件；
var target=e.target | | e.src元素；
if（target.id==element.id）
返回true；
其他的
返回false；
}
函数单击（事件、元素）
{
如果（已单击（事件、元素））
{
警报（“单击一个”）；
}
}
函数twoClick（事件、元素）
{
如果（已单击（事件、元素））
{
警报（“点击两次”）；
}
}
可以在执行脚本之前调用此javascript方法

示例

<style>
#one
{
    width: 200px;
    height: 300px;
    background-color: red;
}
#two
{
    width: 50px;
    height: 70px;
    background-color: yellow;
    margin-left: 10; 
    margin-top: 20;
}

</style>



<div id="one" onclick="oneClick(event, this);">
    one
    <div id="two" onclick="twoClick(event, this);">
        two
    </div>
</div>
#一个
{
宽度：200px；
高度：300px；
背景色：红色；
}
#两个
{
宽度：50px；
高度：70像素；
背景颜色：黄色；
左边距：10；
利润率最高：20；
}
一
二
我希望这能有所帮助。
这在Jquery中对我很有用：

$('#outer_div').click(function(event) {
    if(event.target !== event.currentTarget) return;
    alert("outer div is clicked")                   

});

这样，如果当前目标与外部div不同，它将什么也不做。您可以为子元素实现普通函数。
我假设元素是嵌套的。您可以发布演示吗？您可以使用。您不需要使用jQuery或其他任何东西，使用普通javascript即可轻松完成。该函数的第一行可以缩短为
e=e | | window.event它可以在Chrome上运行，但Firefox说“window.event未定义”，它最终可以运行：event.cancelBubble=true；if（event.stopPropagation）event.stopPropagation（）；window.event在Firefox上不工作，不知道为什么
window.event
是一个非标准的IE属性。谢谢你，它可以工作，但有一个小错误。你写了
e.StopPropagation（）但它应该是
e.stopPropagation（）@SizzlePants:谢谢；固定的。