兩個不同點擊兩個div，一個在另一個

我有兩個div，一個大，另一個小一些，每個div都有自己的OnClick方法。我遇到的問題是當我點擊較小的div時，大div的OnClick方法也被調用。兩個不同點擊兩個div，一個在另一個

我可以避免這種情況？

2010-01-06 Santiago

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

你可以發佈演示嗎？你可以使用http://jsbin.com。 – SLaks 2010-01-06 18:06:43

檢測點擊了哪個元素的最好方法是分析事件的目標（點擊事件）。我爲這個案例準備了一個小例子。你可以在下面的代碼中看到它。

 
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>

我希望這有助於之前被調用。

來源

2010-01-06 18:26:07

幫助很多，我會嘗試，謝謝！ – Santiago 2010-01-06 19:08:37

它終於工作混合答案： event.cancelBubble = true; （event.stopPropagation）event.stopPropagation（）; 窗口。事件不工作在Firefox，不知道爲什麼 – Santiago 2010-01-06 19:23:47

'window.event'是一個非標準的IE屬性。 – SLaks 2010-01-06 19:26:51

您的問題是click事件將在元素樹上傳播。因此，包含被點擊元素的每個元素也會觸發一個事件click。

最簡單的解決方案是添加return false您的處理程序。

如果您使用jQuery，你可以打電話e.stopPropagation();否則，你將需要調用e.stopPropagation()如果它存在，並設置event.cancelBubble = true。

欲瞭解更多信息，請參閱here。

來源

2010-01-06 17:56:17 SLaks

謝謝，這就是我的想法，但它簡單不起作用。 – Santiago 2010-01-06 18:05:17

謝謝你的使用，但是有一個小錯字。你寫了'e.StopPropagation（）;'但它應該是'e.stopPropagation（）;' – 2013-02-17 21:17:53

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

如果您決定使用諸如www.jquery.com之類的JavaScript庫，則可以使用傳播預防選項輕鬆完成要執行的操作。

來源

2010-01-06 17:58:12

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

你正在處理的是事件冒泡。看看這篇文章：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(); 
}

來源

2010-01-06 17:58:57

該函數的第一行可以縮寫爲'e = e || window.event;' – gnarf 2010-01-06 18:01:30

它適用於Chrome，但Firefox說「window.event未定義」 – Santiago 2010-01-06 19:07:00

您正在運行到事件傳播的一個常見的情況。查看quirksmode.org以獲取關於究竟發生了什麼的全部細節。基本上，你需要在較小的div的點擊處理程序做的是這樣的：

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

來源

2010-01-06 17:59:16

兩個不同點擊兩個div，一個在另一個

回答

相關問題