2010-01-06 61 views
8

我有两个div,一个大,另一个小一些,每个div都有自己的OnClick方法。我遇到的问题是当我点击较小的div时,大div的OnClick方法也被调用。两个不同点击两个div,一个在另一个

我可以避免这种情况?

+0

我假设这些元素是嵌套的。 – SLaks 2010-01-06 17:58:24

+0

你可以发布演示吗?你可以使用http://jsbin.com。 – SLaks 2010-01-06 18:06:43

回答

6

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

 
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> 

我希望这有助于之前被调用。

+0

帮助很多,我会尝试,谢谢! – Santiago 2010-01-06 19:08:37

+0

它终于工作混合答案: event.cancelBubble = true; (event.stopPropagation)event.stopPropagation(); 窗口。事件不工作在Firefox,不知道为什么 – Santiago 2010-01-06 19:23:47

+0

'window.event'是一个非标准的IE属性。 – SLaks 2010-01-06 19:26:51

5

您的问题是click事件将在元素树上传播。因此,包含被点击元素的每个元素也会触发一个事件click

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

如果您使用jQuery,你可以打电话e.stopPropagation();否则,你将需要调用e.stopPropagation()如果它存在,并设置event.cancelBubble = true

欲了解更多信息,请参阅here

+0

谢谢,这就是我的想法,但它简单不起作用。 – Santiago 2010-01-06 18:05:17

+0

谢谢你的使用,但是有一个小错字。你写了'e.StopPropagation();'但它应该是'e.stopPropagation();' – 2013-02-17 21:17:53

+1

@SizzlePants:谢谢;固定。 – SLaks 2013-02-18 21:51:22

0

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

+0

你不需要使用jQuery或其他任何东西,它很容易用普通的javascript来完成。 – 2010-01-06 18:00:53

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

该函数的第一行可以缩写为'e = e || window.event;' – gnarf 2010-01-06 18:01:30

+0

它适用于Chrome,但Firefox说“window.event未定义” – Santiago 2010-01-06 19:07:00

2

您正在运行到事件传播的一个常见的情况。查看quirksmode.org以获取关于究竟发生了什么的全部细节。基本上,你需要在较小的div的点击处理程序做的是这样的:

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