Блог

Имея:

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

Я хочу идентифицировать те события мыши, которые происходят за пределами innerDiv, но внутри outerDiv (по-другому, эти события за пределами поля innerDiv).

Этого легко достичь, если я добавлю outerDiv отступ или границу, но я хотел бы знать, есть ли другой способ сделать это без необходимости добавлять дополнительные пиксели к outerDiv.

Спасибо

Используя jQuery, я бы сделал следующее

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

Объяснение:

#outerDiv получит событие с пузырьками. Если целью события или предком цели является #innerDiv , то мы знаем, что оно возникло во внутреннем div. В противном случае этого не произошло. Поскольку это произошло #outerDiv , мы знаем, что это произошло где-то в #outerDiv , но не в #innerDiv

Это может быть достигнуто с помощью флага:

 <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 .