0

When registering a touchmove event on a parent, I only receive the first touchmove event, if the callback removes the child. I would like to keep receiving touchmove events on the parent, although the children inside, are removed or added.

I have prepared a JS-fiddle demoing the problem: http://jsfiddle.net/EVpML/3/

$("#parent").on('touchmove', function(e) {
    e.preventDefault();
    $("#child").remove();
    $('#messages').append('<p>fired</p>');
});

When touching and dragging the #parent (through the #child), the #child is removed and no more touchmove events are sent to the #parent.

I can confirm this in Chrome on Android 4.4.3 but to help you solve this, you can enable mobile touch emulation in Chrome, by following this guide: https://developer.chrome.com/devtools/docs/mobile-emulation

kraenhansen
  • 1,535
  • 2
  • 15
  • 26
  • Yes, clicking or using mousemove does not have the same issue. To enable mobile touch emulation in Chrome, follow this guide: https://developer.chrome.com/devtools/docs/mobile-emulation – kraenhansen Jun 17 '14 at 17:53
  • @Popnoodles - I can confirm that I can reproduce this issue in Chrome on Android 4.4.3. This is not an issue in the emulator, rather the touchmove API, that I need a way to get around. – kraenhansen Jun 17 '14 at 17:57
  • I have updated the jsfiddle to include a e.preventDefault(); as I would like to continuously receive the touchmove event: http://jsfiddle.net/EVpML/3/show/ From this, I receive one "fired" when touching and moving the first time, and multiple "fired" when touching and moving the afterwards. – kraenhansen Jun 17 '14 at 18:03
  • @Popnoodles Can you confirm that it continously adds the line when the parent is being touchmoved the first time? (ie. before the child is removed). – kraenhansen Jun 17 '14 at 18:07
  • Yes that happens, now I understand your issue. Deleting the previous comments. – Popnoodles Jun 17 '14 at 18:07
  • @Popnoodles - My question was rhetorical. I would expect that you cannot confirm that it continuously adds lines when touchmoved the first time. It only prints "fired" once. When the first touch is ended and any new touch is started, multiple "fired" are printed, as I would also expect from the first touch. (But this is not the case - thus my question). – kraenhansen Jun 17 '14 at 18:15
  • Sorry, yes I can confirm that with the latest example it only fires once when you delete the target that was touched, and if the target is not deleted it will continue to fire. – Popnoodles Jun 17 '14 at 18:17
  • Thanks .. Problem remains :/ – kraenhansen Jun 17 '14 at 18:18
  • Is it okay to remove #child when the user lets go instead? – Popnoodles Jun 17 '14 at 18:29
  • No, not really. I am using this for a project here: http://nationalmuseumofdenmark.github.io/twopi.js/ I have an image as a child in a div#wrapper, when the div#wrapper is touchmoved the image child is replaced by another image element. Simply changing the src gives bad performance. – kraenhansen Jun 17 '14 at 18:42
  • 1
    Oh, that's what you want to do? Place an invisible element over the top that's there only to be touched, problem solved. – Popnoodles Jun 17 '14 at 18:45
  • Thanks - but now I solved it, by having all images hidden in the dom, just toggling visibility instead of replacing dom elements. Thanks a lot for your help! – kraenhansen Jun 17 '14 at 18:53
  • No problem. Had you explained the situation rather than the isolated problem, the answer would have been reached a lot quicker! – Popnoodles Jun 17 '14 at 19:05
  • I agree, I will keep that in mind. Explaining the context is important for people to suggest alternative strategies. The quirk in the touchmove event remains, but allowing elements to simply be hidden, was a good way around it. – kraenhansen Jun 17 '14 at 19:09

0 Answers0