Get element on touchstart?

Question

I have a series of divs on a page which you can swipe left on, which will reveal a div underneath. This works fine when there is only one element, but when there are multiple, they all swipe in unison, instead of the one getting swiped alone.

To remedy this, I tried the ideas here: Find element finger is on during a touchend event

Problem is, now only the first element gets swiped, while the rest of them stay stationary. Any ideas on how I could fix this? I thought I could use this, but it would always return the window object.

Code:

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

Demo (only works on iOS): http://www.codekraken.com/testing/snowday/swipe.html

I didn't think anything was that simple... could you post that as an answer and I'll mark it as accepted. — Charlie, Oct 17 '12 at 00:51

score 6 · Accepted Answer · answered Oct 17 '12 at 00:54

6

You can get the element which the event originated in by using event.target.

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

answered Oct 17 '12 at 00:54

ahren

16,803
5
50
70

score 0 · Answer 2 · edited Mar 22 '16 at 07:41

0

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

with obj = $(this) you can transform event.target into a jquery-object using jquery functions...

best

M

edited Mar 22 '16 at 07:41

VK Da NINJA

510
7
19

answered Jun 09 '14 at 20:05

mboeckle

938
13
29

It is a best pratice to use [ $obj = $(this) ] use $ to indicate it is a jQuery object – vanduc1102 Jul 20 '17 at 05:15

Get element on touchstart?

2 Answers2