jQuery mobile event, taphold

[csdude55]

This should be fairly simple, but nothing else has been so why not this, too? LOL

I'm trying to fire an event after the user has held down for a second. I specifically want it for mobile users, and while I would prefer it not fire on desktop... I can live with it.

I'm using jQuery Mobile 1.2.1 because 1.4.5 messed up inline radio buttons and made them block elements. I feel like there were some other aesthetic issues that came up, too, but it's been awhile and I don't remember them all now.

I started with this:

function holdClick(element) {
 $('#' + element).on('taphold', function(event) {
  alert(element);
 });
}

But nothing happens, so I'm guessing it's not compatible with 1.2.1.

So then I tried this, borrowed from some code I found elsewhere:

function holdClick(element) {
 var mousedown = false;
 var mousedown_timer = '';

 alert('1 - ' + element);

 $('#' + element).on('mousedown', function(e) {
  mousedown = true;

  mousedown_timer = setTimeout(function () {
   if (mousedown) {
    alert('2 - ' + element);
   }
  }, 750);
 })
 .on('mouseup', function(e) {
  mousedown = false;
  clearTimeout(mousedown_timer);
 });
}

This works on desktop, but not on mobile. The first alert triggers from clicking the link, of course, but I don't get the second alert.

UNLESS! I removed the whole .on('mouseup', ...) section, and then nothing happens if I hold down, but if I just click and let off then I get the first alert, then a second later I get the second alert 4 times in a row.

Thoughts on how I can fix this? Other than moving over to jQuery mobile 1.4.5 and revisiting the aesthetic bugs, I mean?

[tangor]

I don't have an answer, but I do suggest that using the latest version of whatever you wish to use, and knowing what is in it, is usually the best place to START. Mixing and matching will be a nightmare down the road.

[csdude55]

True. I built the header over a year ago, then took several months off after I had to let some employees go and I took over their responsibilities. But I made a thread back then about several incompatibilities with the latest version, and there was no real resolution given, so I gave up:

[webmasterworld.com...]

I'm not willing to give up the swipeleft feature (that's my whole purpose behind starting this journey with jQuery, anyway), so I'm stuck working around these things...

[robzilla]

The taphold event has been in jQuery since 1.0. Maybe try binding a function to the event, like in this example [api.jquerymobile.com].

[Steven29]

Have you tried Touchstart and touchend or vmouseover ?

[csdude55]

After a lot of research, I'm pretty sure that my best option here is to update jQuery to 3.3.1, and instead of using jQuery Mobile I'm just using the taphold and swipe functions in to my own script. That eliminated a lot of my problems :-)

But now I'm having a new question with taphold. I'm using it like this:

// Usage: <div id="test" onClick="holdClick('test')">

function holdClick(element) {
 $('#' + element).on('taphold', function(e) {
  alert('1');
  e.stopImmediatePropagation();
  return false;
 })
 .on('click', function(e) {
  alert('2');
  e.stopImmediatePropagation();
  return false;
 });
}

The problem is that when the user tapholds over an element with text in it, the browser highlights text instead of triggering the taphold event.

How do I turn off the text-highlight function? If I can't then this feature is kinda useless here :-(

[csdude55]

How do I turn off the text-highlight function?

Found the solution... in CSS:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);

I'm not sure if all of those are really needed now, but this worked on my Samsung S7 and my girlfriend's iPhone.