Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Touch device ghost click triggers on different element Reply To: Touch device ghost click triggers on different element

#252944
Shikkediel
Participant

I’ve heard that this solution from Stackoverflow takes care of the ghost click:

$(document).on('touchstart click', '.myBtn', function(event){
    if(event.handled === false) return
    event.stopPropagation();
    event.preventDefault();
    event.handled = true;
    // Do your magic here
});

Looks like that was extracted from some jsbin code:

codepen.io/anon/pen/yMvLmx

That doesn’t seem to work either, at least not with Firefox touch emulation. Even though using a flag at all doesn’t seem necessary when preventDefault is also in place…

var kind;

function TouchClick(sel, fnc) {
  $(sel).on('touchstart click', function(event) {
    event.stopPropagation();
    event.preventDefault();
    $('div span').append(event.handled + '<br>');
    if (event.handled !== true) {
      kind = event.type;
      fnc(event);
      event.handled = true;
    } else {
      return false;
    }
  });
}

TouchClick('div', function() {
  $('div span').append(kind + '<br>');
});

Here event.handled is just as undefined on each occurence as with the smaller script.