How to detect a long touch pressure with javascript for android and iphone?

后端 未结 8 1587
天涯浪人
天涯浪人 2020-11-27 04:05

How to detect a long touch pressure with javascript for android and iphone? native javascript or jquery...

I want something that sound like :



        
相关标签:
8条回答
  • 2020-11-27 04:15

    I've done it this way in my Android app:

    1. registered events listeners:

      var touchStartTimeStamp = 0;
      var touchEndTimeStamp   = 0;
      
      window.addEventListener('touchstart', onTouchStart,false);
      window.addEventListener('touchend', onTouchEnd,false);
      
    2. added functions:

      var timer;
      function onTouchStart(e) {
          touchStartTimeStamp = e.timeStamp;
      }
      
      function onTouchEnd(e) {
          touchEndTimeStamp = e.timeStamp;
      
          console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds
      }
      
    3. checked time difference and did my stuff

    I hope this will help.

    0 讨论(0)
  • 2020-11-27 04:17

    Long tap event that working in all browser

    (function (a) {
            function n(b) { a.each("touchstart touchmove touchend touchcancel".split(/ /), function (d, e) { b.addEventListener(e, function () { a(b).trigger(e) }, false) }); return a(b) } function j(b) { function d() { a(e).data(h, true); b.type = f; jQuery.event.handle.apply(e, o) } if (!a(this).data(g)) { var e = this, o = arguments; a(this).data(h, false).data(g, setTimeout(d, a(this).data(i) || a.longclick.duration)) } } function k() { a(this).data(g, clearTimeout(a(this).data(g)) || null) } function l(b) {
                if (a(this).data(h)) return b.stopImmediatePropagation() ||
                false
            } var p = a.fn.click; a.fn.click = function (b, d) { if (!d) return p.apply(this, arguments); return a(this).data(i, b || null).bind(f, d) }; a.fn.longclick = function () { var b = [].splice.call(arguments, 0), d = b.pop(); b = b.pop(); var e = a(this).data(i, b || null); return d ? e.click(b, d) : e.trigger(f) }; a.longclick = { duration: 500 }; a.event.special.longclick = {
                setup: function () {
                    /iphone|ipad|ipod/i.test(navigator.userAgent) ? n(this).bind(q, j).bind([r, s, t].join(" "), k).bind(m, l).css({ WebkitUserSelect: "none" }) : a(this).bind(u, j).bind([v,
                    w, x, y].join(" "), k).bind(m, l)
                }, teardown: function () { a(this).unbind(c) }
            }; var f = "longclick", c = "." + f, u = "mousedown" + c, m = "click" + c, v = "mousemove" + c, w = "mouseup" + c, x = "mouseout" + c, y = "contextmenu" + c, q = "touchstart" + c, r = "touchend" + c, s = "touchmove" + c, t = "touchcancel" + c, i = "duration" + c, g = "timer" + c, h = "fired" + c
        })(jQuery);
    

    Bind longclick event with time interval

     $('element').longclick(250, longClickHandler);
    

    below function fire on Long Tap on touch device

    function longClickHandler() {
        alter('Long tap Fired');
    }
    
    0 讨论(0)
  • 2020-11-27 04:22

    The solutions posted here ignore the fact that the user needs to touch the screen to initiate scroll. We only want the long-press behavior if the user is not trying to scroll.

    function onLongPress(element, callback) {
      let timer;
    
      element.addEventListener('touchstart', () => { 
        timer = setTimeout(() => {
          timer = null;
          callback();
        }, 500);
      });
    
      function cancel() {
        clearTimeout(timer);
      }
    
      element.addEventListener('touchend', cancel);
      element.addEventListener('touchmove', cancel);
    }
    

    And then:

    onLongPress(element, () => {
      console.log('Long pressed', element);
    });
    
    0 讨论(0)
  • 2020-11-27 04:33

    We can calculate the time difference when the touch started and when the touch end. If the calculated time difference exceed the touch duration then we use a function name taphold.

    var touchduration = 300; 
    var timerInterval;
    
    function timer(interval) {
    
        interval--;
    
        if (interval >= 0) {
            timerInterval = setTimeout(function() {
                                timer(interval);
                            });
        } else {
            taphold();
        }
    
    }
    
    function touchstart() {
        timer(touchduration);
    }
    
    function touchend() {
        clearTimeout(timerInterval);
    }
    
    function taphold(){
        alert("taphold");
    }
    
    
    document.getElementById("xyz").addEventListener('touchstart',touchstart);
    document.getElementById("xyz").addEventListener('touchend',touchend);
    
    0 讨论(0)
  • 2020-11-27 04:35

    Here is an extended version of Joshua answer, as his code works well till user doesn't perform multitouch (you can tap screen with two fingers and function will be triggered two times, 4 fingers - 4 times). After some additional test scenarios I even triggered possibility to touch very freequently and receive function executing after each tap.

    I added variable named 'lockTimer' which should lock any additional touchstarts before user trigger 'touchend'.

    var onlongtouch; 
    var timer;
    var touchduration = 800; //length of time we want the user to touch before we do something
    
    function touchstart(e) {
        e.preventDefault();
        if (!timer) {
            timer = setTimeout(onlongtouch, touchduration);
        }
    }
    
    function touchend() {
        //stops short touches from firing the event
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
    }
    
    onlongtouch = function() { 
        timer = null;
        document.getElementById('ping').innerText+='ping\n'; 
    };
    
    document.addEventListener("DOMContentLoaded", function(event) { 
        window.addEventListener("touchstart", touchstart, false);
        window.addEventListener("touchend", touchend, false);
    });
    <div id="ping"></div>

    0 讨论(0)
  • 2020-11-27 04:38

    The problem with using Touch End to detect the long touch is it won't work if you want the event to fire after a certain period of time. It is better to use a timer on touch start and clear the event timer on touch end. The following pattern can be used:

    var onlongtouch; 
    var timer;
    var touchduration = 500; //length of time we want the user to touch before we do something
    
    touchstart() {
        timer = setTimeout(onlongtouch, touchduration); 
    }
    
    touchend() {
    
        //stops short touches from firing the event
        if (timer)
            clearTimeout(timer); // clearTimeout, not cleartimeout..
    }
    
    onlongtouch = function() { //do something };
    
    0 讨论(0)
提交回复
热议问题