Question

当鼠标位于容器div上时，我正在寻找一种获取鼠标下div的方法。类似的东西：

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

有点像Document.elementFromPoint()，除了＆＃34;来自点＆＃34的指定容器内的所有元素; （并且在实验阶段之外）。

也许涉及事件冒泡通过每个子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的直接后代？

为什么不使用.find（＆＃39; *＆＃39;）来获取鼠标悬停时div.container的所有后代：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

获取鼠标位置下的div列表

2 个答案: