Question

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

我可以避免这种情况吗？

Answer 1

您的问题是click事件将在元素树中向上传播。因此，包含单击元素的每个元素也将触发click事件。

最简单的解决方案是添加return false您的处理程序。

如果您使用jQuery，则可以致电e.stopPropagation();，否则，如果相同，则需要致电e.stopPropagation()，并设置event.cancelBubble = true。

有关详细信息，请参阅here。

Answer 2

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

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');
    }
}

在执行脚本之前可以调用此javascript方法

示例

Answer 3

您正在处理的是事件冒泡。看一下这篇文章：http://www.quirksmode.org/js/events_order.html。

基本上，要阻止事件传递给父元素，您可以使用以下内容：

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();
}

Answer 4

您遇到了事件传播的常见情况。查看quirksmode.org以获取有关具体情况的完整详细信息。基本上，你需要在较小的div的点击处理程序中做的是：

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

Answer 5

如果您决定使用诸如www.jquery.com之类的javascript库，则可以使用传播预防选项轻松完成您尝试执行的操作。

Answer 6

这在Jquery中对我有用：

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

});

这样，如果当前目标与外部div不同，它将不执行任何操作。您可以为子元素实现常规函数。

两个不同的OnClick上两个div，一个在另一个上

6 个答案: