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

Question

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

我可以避免谁？

Answer 1

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

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

如果您正在使用jQuery,则可以通过e.stopPropagation();其他方式调用,e.stopPropagation()如果存在则需要调用并设置event.cancelBubble = true.

有关更多信息,请参阅此处.

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方法

例

<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>

我希望这有帮助.