在touchstart事件上获取元素？

Question

我在页面上有一系列的div，您可以向左滑动，在下面会出现一个div。如果仅有一个元素，那么这个功能可以正常运行，但是如果有多个元素，则它们会同时滑动，而不是单独滑动一个。

为了解决这个问题，我尝试了这里的想法：查找手指在touchend事件期间所在的元素 问题是，现在只有第一个元素被滑动，而其余的元素保持静止。您有什么好的想法来解决这个问题吗？我曾经想过使用this，但它总是返回window对象。

代码:

var originalCoord = {
        x: 100,
        y: 100
    }
    var finalCoord = {
        x: 100,
        y: 100
    }

    function touchMove(event) {
        event.preventDefault();
        finalCoord.x = event.targetTouches[0].pageX
        finalCoord.y = event.targetTouches[0].pageY
    }

    function touchEnd(event) {
        var changeY = originalCoord.y - finalCoord.y
        if (changeY < 30 && changeY > (30 * -1)) {
            changeX = originalCoord.x - finalCoord.x
            if (changeX > 10) {
               var elem = document.elementFromPoint(event.pageX, event.pageY);
               console.log(elem);
                $(elem).css("margin-left", "-54px");
                setTimeout(function () {
                    $(elem).css("margin-left", "0px");}
                , 500);
            }
        }
    }

    function touchStart(event) {
        originalCoord.x = event.targetTouches[0].pageX
        originalCoord.y = event.targetTouches[0].pageY
        finalCoord.x = originalCoord.x
        finalCoord.y = originalCoord.y
    }

    this.addEventListener("touchstart", touchStart, false);
    this.addEventListener("touchmove", touchMove, false);
    this.addEventListener("touchend", touchEnd, false);

演示（仅适用于iOS）：http://www.codekraken.com/testing/snowday/swipe.html

- Charlie

---

我没想到那件事情会这么简单...你能把它发表为一个答案，我会标记它为被接受的。 - Charlie

Answer 1

您可以使用 event.target 获取事件的起源元素。

function touchStart(event){
  var currentElement = event.target;
}

- ahren

Answer 2

$('#id').on('touchstart',function(e,data) {             
    var obj = e.target;
    obj = $(this);
    var id = obj.find....   
});

使用obj = $(this)，你可以使用jQuery函数将event.target转换为一个jQuery对象...

最好的。

M

- mboeckle

---

最佳实践是使用 [ $obj = $(this) ]，使用 $ 表示它是一个 jQuery 对象。 - vanduc1102