Howto：div與onclick另一個div與onclick javascript

只是一個簡單的問題。我在互相之間使用onclick javascript處理div問題。當我點擊內部div時，它應該只會觸發它的onclick javascript，但外部div的javascript也被解僱了。如何在不觸發外部div的javascript的情況下點擊內部div？Howto：div與onclick另一個div與onclick javascript

<html> 
<body> 
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div 
    <div onclick="alert('inner');" style="width:200px;height:200px;background-color:white;" />inner div</div> 
</div> 
</div> 
</body> 
</html>

來源

2010-03-05 Daniel Brink

重複。 http://stackoverflow.com/questions/2015041/two-differents-onclick-on-two-divs-one-over-the-other – vpram86 2010-03-05 07:16:38

重複的問題，但更好的答案。 – 2011-02-16 01:46:11

基本上有在JavaScript這兩種事件模型。 事件捕獲和事件冒泡。在事件冒泡中，如果您點擊div內部，則首先觸發inside div click事件，然後觸發外部div點擊。而在事件捕獲中，首先觸發外部div事件並觸發內部div事件。要停止事件傳播，請在點擊方法中使用此代碼。

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

來源

2010-03-05 07:29:13 Adeel

謝謝，一個簡單的明確答案，並完美的作品 – 2010-03-05 07:37:05

謝謝。優秀的答案;就是我在找的東西。 – 2012-11-22 03:34:52

return false;從內部的div的onclick功能：

<div onclick="alert('inner'); return false;" ...

什麼你正在處理被稱爲event propagation。

來源

2010-03-05 07:17:26

您建議的方法實際上不起作用。（至少不是在任何瀏覽器中，我只是加倍檢查它 - Firefox 3.6，IE8。）請注意，您的鏈接實際上表示使用不同的方法，我在回答中給出了。 – 2010-03-05 07:37:57

退房事件傳播的信息here

特別是你要在你的事件處理一些像這樣的代碼來傳播停止事件：

function myClickHandler(e) 
{ 
    // Here you'll do whatever you want to happen when they click 

    // now this part stops the click from propagating 
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
}

來源

2010-03-05 07:18:09

謝謝！這對我 – CraZyDroiD 2017-09-12 11:15:58

這是事件冒泡的情況下，。

您可以使用

e.cancelBubble = true; //IE

和

e.stopPropagation(); //FF

來源

2010-03-05 07:21:39 rahul

花了一段時間瞭解，但現在得到它，thx – 2010-03-05 07:37:41

Here是一些參考資料，以便幫助您瞭解JavaScript事件冒泡。

來源

2010-03-05 07:33:45 Ben

你有兩個'div'和三個'/ div'。基於WebKit瀏覽器

來源

2010-07-24 16:27:20 freddie

另一種方式：

<div onclick="alert('inner'); event.stopPropagation;" ...

來源

2012-02-23 00:08:22 user1227168

這個工作，但是像這樣：onclick =「alert（'inner'）; event.stopPropagation（）;」 – 2015-12-10 12:29:08

這工作對我和我在Opera（46），Chrome（59.0.3071.115），FireFox開發人員（55.0b9（32位）），Internet Explorer 11 – 2017-07-19 19:09:43

這是非常有益的，但它並沒有爲我工作。我所做的是here。

所以我把一個條件外onclick事件：

if(!event.isPropagationStopped()) { 
    window.location.href = url; 
}

來源

2012-08-03 07:42:52 shooby

只需添加以下代碼：

window.event.stopPropagation();

來源

2014-04-17 15:47:10 user3438083

測試它這沒有爲我工作。最重要的答案是更準確。 – 2015-12-18 11:00:45

您可以使用

$("divOrClassThatYouDontWantToPropagate").click(function(event) { 
 
     event.stopPropagation(); 
 
    });

來源

2015-04-22 12:04:44

Howto：div與onclick另一個div與onclick javascript

回答

相關問題