マウスの位置にあるdivのリストを取得

Question

マウスがコンテナdivの上にあるときに、マウスの下にあるdivのリストを取得する方法を探しています。

$('.container').mouseover(function(e){ ...getDivsAtThisPoint()... });

「点から指定されたコンテナ内のすべての要素」以外Document.elementFromPoint()等の種類（及び「実験」段階のうち）のようなもの。

多分、各子divを介してイベントバブリングを含む何か？しかし、私はその仕事をどうやって作るのか分かりませんでした。

Answer 1

私はこのjQueryの拡張機能を作成することになった、this linkから適応し、 Xufoxさんのコメント：

(function ($, document, undefined) { 
    $.fn.extend({ 
    /** 
    * @param {number} x The x-coordinate of the Point. 
    * @param {number} y The y-coordinate of the Point. 
    * @param {Element} until (optional) The element at which traversing should stop. Default is document.body 
    * @return {jQuery} A set of all elements visible at the given point. 
    */ 
    elementsFromPoint: function(x, y, until) { 
     until = this[0]; 

     var parents = []; 
     var current; 

     do { 
     current = document.elementFromPoint(x, y); 
     if (current !== until) { 
      console.log("current",current); 
      parents.push(current); 
      current.style.pointerEvents = 'none'; 
     } else { 
      current = false; 
     } 
     } while (current); 

     parents.forEach(function (parent) { 
      return parent.style.pointerEvents = 'all'; 
     }); 
     return $(parents); 
    } 
    }); 
})(jQuery, document); 

私はそうのようにそれを使用します。

$('.availabilityOverlap').mouseover(function(e){ 
    console.log($('.availabilityOverlap').elementsFromPoint(e.pageX, e.pageY)); 
}); 

これは、指定されたコンテナまでのjQuery要素の配列です。

Answer 2

このような意味ですか？そして、すべての要素によって、あなたはすべての子孫を意味し、div.containerの直接子孫だけではありませんか？

なぜマウスオーバーでdiv.containerのすべての子孫を取得するには（ '*'）.find使用しない：

$('.container').mouseover(function(e){ 
 
    console.log($(this).find('*')) 
 
});

.container div { 
 
    padding: 10px; 
 
} 
 

 
.container div:nth-child(odd) { 
 
    background: #a3fecbef; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div> 
 
     <section>001</section> 
 
    </div> 
 
    <div> 
 
     <section>002</section> 
 
    </div> 
 
    <div> 
 
     <section>003</section> 
 
    </div> 
 
    <div> 
 
     <section>004</section> 
 
    </div> 
 
    <div> 
 
     <section>005</section> 
 
    </div> 
 
    <div> 
 
     <section>006</section> 
 
    </div> 
 
</div>