事件在保證金

有：事件在保證金

<div id="outerDiv"> 
    <div id="innerDiv" style="margin: 10px">Content goes here</div> 
</div>

我想找出發生innerDiv外，但裏面outerDiv的鼠標事件（以不同的方式表示，在innerDiv保證金的事件）。

這很容易實現，如果我添加outerDiv填充或邊框，但我想知道是否有另一種方法來做到這一點，而不必添加額外的像素到outerDiv。

感謝

來源

2011-05-04 Javier Ferrero

什麼樣的鼠標事件？ – 2011-05-04 19:12:25

這是拖放，所以我需要捕捉鼠標，鼠標移動和鼠標。 – 2011-05-04 19:15:18

這可以通過使用一個標誌來實現：

<div id="outerDiv" style="border:thin solid red;"> 
    <div id="innerDiv" style="border:thin solid blue; margin: 10px;">Content goes here</div> 
</div> 

<script language="javascript"> 

var flag = false; 

document.getElementById("outerDiv").onclick = function(){ 
    if (flag) { 
     flag = false; 
     return false; 
    } 
    alert("Clicked outerDiv"); 
} 

document.getElementById("innerDiv").onclick = function(){ 
    flag = true; 
    alert("Clicked innerDiv"); 
} 

</script>

的本質是爲innerDiv事件，應該先觸發。如果是這樣，請阻止outerDiv的事件。

該技術適用於onmousedown,onmouseup和onmousemove。

來源

2011-05-04 19:43:44

謝謝，但你的例子工程，因爲你給outerDiv添加了一個邊框，這就是我試圖避免 – 2011-05-04 20:03:22

在Mac上爲Safari瀏覽器，Firefox，Chrome和Opera工作 - 有和沒有邊框。預計它也將適用於所有其他格式。我只添加了邊框以便知道點擊的位置;-) – 2011-05-04 20:29:25

但是，如果您不添加邊框，DIV不會像您期望的那樣呈現。例如，查看'style =「background-color：yellow;」'和'style =「border：thin solid red;」'for outerDiv'「之間的區別。這種差異意味着如果沒有邊框，'outerDiv'不會在'innerDiv'的上面和下面點擊。如果你不想添加邊框，你可以爲'outerDiv'設置'height'或者給它一些'padding'。 – 2011-05-04 20:34:53

使用jQuery我會做以下

$("#outerDiv").bind("event", function(e) { 
    if ($(e.target).closest("#innerDiv")) { 
    alert("from inner div"); 
    } 
    else { 
    alert("from outer div only"); 
    } 
});

說明：

#outerDiv會得到一個冒泡事件。如果事件的目標或目標的祖先是#innerDiv那麼我們知道它發源於內部分區。否則它沒有。由於它打到#outerDiv我們知道它發生在#outerDiv的某處，但不在#innerDiv

來源

2011-05-04 19:43:49

事件在保證金

回答

相關問題