事件在保证金

有：事件在保证金

<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

事件在保证金

回答

相关问题