Question

On my page, when you swipe right on an element, the element will move. I have the following code to handle these swipes:

window.addEventListener("touchstart", touchStart, false);
window.addEventListener("touchmove", touchMove, false);

Problem is, it’s not just affecting the elements that I want to be swipe-able. Instead, if I swipe anywhere on the page, it will run touchMove. To fix this, I tried:

var content = document.getElementById("content");
content.addEventListener("touchstart", touchStart, false);
content.addEventListener("touchmove", touchMove, false);

This sort of worked, but when a div was shown (via user interaction) over #content, the events would still fire.

Another solution that I considered was binding these events to the elements in #content, the ones that should have swiping enabled. Problem is, these elements are added to the page dynamically, so when the function above is called on page load, the elements aren’t accounted for. I then looked to using jQuery’s .on() method, like so:

$("#content .row").on("touchmove", touchMove, false);

But that’s not calling touchMove at all.

Is there a better way to do all of this? Does it make sense that touchMove would get called on an element that’s not a child of #content when the event listener is assigned to only #content?

Answer 1

Try this way by attaching event to document and providing filter for your required elements.

$(document).on("touchmove", "#content .row", touchMove);

Edit as per comments, you can get event this way

$(document).on("touchmove", "#content .row", function(event){
       alert(event.target.id);
});