'Ghost clicks' on iOS when elements are created dynamically

[bredfield]

Whenever I programmatically create a node and bind a 'click' event, I get 'ghost clicks' on iOS - the bound event gets fired twice. This doesn't happen on elements that exist on page load. Any ideas?

[thaoms]

Is this ever going to get fixed?

[thaoms]

I got this fixed by adding e.preventDefault(); in the touchstart function

var touchstart = function(e) {
// setup the initial values
// TODO: touch and hold
e.preventDefault();
this.startXY = [e.touches[0].clientX, e.touches[0].clientY];
this.threshold = false;
};

[thurloat]

@thomasvankerckvoorde I believe your best bet is to take the initiative and make the change yourself + open a pull request.

[garrettlangley]

are there any implications to calling e.preventDefault()?

[thurloat]

Without testing the code, I think it could break things like scrolling, dragging, etc. anything custom that a JS app is listening for touchstart events.

[thaoms]

In my project it did, when I used another prevent default to avoid links opening a new tab. (Commented the build-in standalone code, because that one didn't work for me). My project is a standalone slideshow app. So apart from some buttons and flex slider it didn't need that much custom functionality. You should try it in your code locally, see if it works out for you.

On Friday 4 January 2013 at 15:56, Adam Thurlow wrote:

Without testing the code, I think it could break things like scrolling, dragging, etc. anything custom that a JS app is listening for touchstart events.

—
Reply to this email directly or view it on GitHub (#10 (comment)).

[garrettlangley]

thanks @thurloat and @thomasvankerckvoorde

[thaoms]

Temporary I'm using this lib, https://github.com/ftlabs/fastclick. Until this one get fixed.

[garrettlangley]

@thomasvankerckvoorde i was able to drive a preventDefault off of class/id of the target.

  if (e.target.className == "button") {
    e.preventDefault();
  }

[tarcon]

I ran into a similar problem with energize.js interacting with dynamically generated elements at the position of the target element in a slow-loading environment.

A button triggers an angular.js route change and the view with the source button is removed and replaced by a second view which has a new button at the same place. The new button is then triggered after route change. That behaviour is just madness.

[davidcalhoun]

I've only seen tarcon's issue, which I can reproduce on my end. Can't seem to get a use case working that demonstrates the original issue described, although enough folks seem to have it.

Any additional info or code would help!

(sorry for the delay - have been on a LONG sabbatical)