javascript touchend 如果元素在另一个元素之上

Question

对于在 touchend 事件期间衡量一个元素是否在另一个元素(视觉上)的最佳方法感到困惑。本质上，我正在实现触摸友好的拖放操作。

我看过一些关于 .elementFromPoint() 和 event.touches 的内容，但我不确定如何使用它们来测量特定元素的边界。类似下面的内容。

.bind('touchend', function(e){

    e.preventDefault();

    /* IF (targ is within titles bounds) { append targ to titles} */
    if (titles == document.elementFromPoint(orig.touches[0].pageX,orig.touches[0].pageY)){

        titles.append(targ);
    }

    targ.removeClass('moving').removeAttr('style');
});

Answer 1

这对我来说似乎工作得天衣无缝，不断地在拖动的元素上切换 zindex，以便您可以获得下面的元素。

element.addEventListener('touchmove', touchMove, false);

function touchMove(event) {
    var x = event.targetTouches[0].clientX;
    var y = event.targetTouches[0].clientY;
    dragger.style.zIndex = -1;
    var hoveredElement = document.elementFromPoint(x, y);
    console.log(hoveredElement);
    dragger.style.zIndex = options.draggerZIndex;

}

如果你可以忽略旧浏览器这个答案javascript - elementFromPoint select bottom element也可以只添加指针事件:无