CODEWITHSUNDEEP
javascriptjqueryiostouch-event
Charlie
Charlie

Reputation: 11767

Get element on touchstart?

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

Upvotes: 3

Views: 15986

Answers (2)

mboeckle
mboeckle

Reputation: 972

$('#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

Upvotes: 0

ahren
ahren

Reputation: 16961

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

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

Upvotes: 6

Related Questions