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

Two differents OnClick on two divs, one over the other(两个不同的 OnClick 两个 div，一个在另一个上)

问题描述

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

谁能避免这种情况?

检测哪个元素被点击的最好方法是分析事件的目标(点击事件).我为这个案例准备了一个小例子.您可以在下面的代码中看到它.

<上一页>函数 amIclicked(e, 元素){e = e ||事件;var 目标 = e.target ||e.src元素；如果(目标.id==元素.id)返回真；别的返回假；}函数oneClick(事件，元素){如果(amIclicked(事件，元素)){alert('一个被点击');}}函数twoClick(事件，元素){如果(amIclicked(事件，元素)){alert('点击了两个');}}

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

示例

<上一页><风格>#一{宽度:200px；高度:300px；背景颜色:红色；}#二{宽度:50px；高度:70px；背景颜色:黄色；左边距:10；边距顶部:20；}</风格><div id="one" onclick="oneClick(event, this);">一<div id="two" onclick="twoClick(event, this);">二</div></div>

我希望这会有所帮助.

I have two divs, a big one and a smaller over the other, each div has its own OnClick method. The problem I have is when I clicked the smaller div, the big div's OnClick method is called too.

Who can I avoid that?

The best way to detect which element was clicked is to analyze target of event ( click event ). I have prepared small example for this case. You can see it in code below.

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

This javascript method can be called before you execute your script

Example

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

I hope this helps.

这篇关于两个不同的 OnClick 两个 div，一个在另一个上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！