الضغط لفترة طويلة في جافا سكريبت؟

Question

هل من الممكن تنفيذ "الضغط لفترة طويلة" في JavaScript (أو jQuery)؟كيف؟

_{(مصدر: androinica.com)}

لغة البرمجة

<a href="" title="">Long press</a>

جافا سكريبت

$("a").mouseup(function(){
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  return false; 
});

Answer 1

لا يوجد سحر "jQuery" ، فقط أجهزة ضبط الوقت JavaScript.

var pressTimer;

$("a").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
  return false; 
});

Answer 2

بناءً على إجابة مايكو مورا ، كتبت هذا. كما يضمن عدم قيام المستخدم بنقرة باهظة ، مما يؤدي إلى الضغط الطويل ويعمل على الأجهزة المحمولة. العرض التوضيحي

var node = document.getElementsByTagName("p")[0];
var longpress = false;
var presstimer = null;
var longtarget = null;

var cancel = function(e) {
    if (presstimer !== null) {
        clearTimeout(presstimer);
        presstimer = null;
    }

    this.classList.remove("longpress");
};

var click = function(e) {
    if (presstimer !== null) {
        clearTimeout(presstimer);
        presstimer = null;
    }

    this.classList.remove("longpress");

    if (longpress) {
        return false;
    }

    alert("press");
};

var start = function(e) {
    console.log(e);

    if (e.type === "click" && e.button !== 0) {
        return;
    }

    longpress = false;

    this.classList.add("longpress");

    if (presstimer === null) {
        presstimer = setTimeout(function() {
            alert("long click");
            longpress = true;
        }, 1000);
    }

    return false;
};

node.addEventListener("mousedown", start);
node.addEventListener("touchstart", start);
node.addEventListener("click", click);
node.addEventListener("mouseout", cancel);
node.addEventListener("touchend", cancel);
node.addEventListener("touchleave", cancel);
node.addEventListener("touchcancel", cancel);

يجب عليك أيضًا تضمين بعض المؤشرات باستخدام الرسوم المتحركة CSS:

p {
    background: red;
    padding: 100px;
}

.longpress {
    -webkit-animation: 1s longpress;
            animation: 1s longpress;
}

@-webkit-keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

@keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

Answer 3

يمكنك استخدام الصنبور عقد حدث jQuery Mobile API.

jQuery("a").on("taphold", function( event ) { ... } )

Answer 4

على الرغم من أنها تبدو بسيطة بما يكفي لتنفيذها بمفردك مع مهلة واثنين من معالجات الأحداث الماوس ، إلا أنها تصبح أكثر تعقيدًا عندما تفكر والعمل مع أجهزة اللمس مثل iPad. انتهى بي الأمر باستخدام Longclick jQuery Plugin (جيثب) ، والتي تعتني بهذه الأشياء بالنسبة لي. إذا كنت بحاجة فقط إلى دعم أجهزة الشاشة التي تعمل باللمس مثل الهواتف المحمولة ، فيمكنك أيضًا تجربة حدث JQuery Mobile Taphold.

Answer 5

المكون الإضافي jQuery. فقط ضع $(expression).longClick(function() { <your code here> });. المعلمة الثانية هي مدة عقد. المهلة الافتراضية هي 500 مللي ثانية.

(function($) {
    $.fn.longClick = function(callback, timeout) {
        var timer;
        timeout = timeout || 500;
        $(this).mousedown(function() {
            timer = setTimeout(function() { callback(); }, timeout);
            return false;
        });
        $(document).mouseup(function() {
            clearTimeout(timer);
            return false;
        });
    };

})(jQuery);

Answer 6

صنعت حدث طويل الضغط (0.5k نقي جافا سكريبت) لحل هذا ، يضيف أ long-press حدث إلى DOM.

استمع ل long-press تشغيل أي عنصر:

// the event bubbles, so you can listen at the root level
document.addEventListener('long-press', function(e) {
  console.log(e.target);
});

استمع ل long-press على محدد عنصر:

// get the element
var el = document.getElementById('idOfElement');

// add a long-press event listener
el.addEventListener('long-press', function(e) {

    // stop the event from bubbling up
    e.preventDefault()

    console.log(e.target);
});

يعمل في IE9+، Chrome ، Firefox ، Safari & Hybrid Apps (Cordova & Ionic على iOS/Android)

العرض التوضيحي

Answer 7

$(document).ready(function () {
    var longpress = false;

    $("button").on('click', function () {
        (longpress) ? alert("Long Press") : alert("Short Press");
    });

    var startTime, endTime;
    $("button").on('mousedown', function () {
        startTime = new Date().getTime();
    });

    $("button").on('mouseup', function () {
        endTime = new Date().getTime();
        longpress = (endTime - startTime < 500) ? false : true;
    });
});

العرض التوضيحي

Answer 8

لمطوري المنصات المتقاطعة (لاحظ أن جميع الإجابات المقدمة حتى الآن لن تعمل على iOS):

يبدو أن Mouseup/Down يعمل بشكل جيد ذكري المظهر - ولكن ليس كل الأجهزة أي (Samsung Tab4). لم يعمل على الإطلاق iOS.

مزيد من الأبحاث يبدو أن هذا يرجع إلى العنصر الذي يتمتع بالاختيار وأن التكبير الأصلي يتداخل المستمع.

يمكّن مستمع الحدث هذا صورة الصورة المصغرة لفتحها في وسيط bootstrap ، إذا كان المستخدم يحتفظ بالصورة لـ 500 مللي ثانية.

يستخدم فئة صورة مستجيبة لذلك تعرض نسخة أكبر من الصورة. تم اختبار قطعة الكود هذه بالكامل (iPad/tab4/taba/galaxy4):

var pressTimer;  
$(".thumbnail").on('touchend', function (e) {
   clearTimeout(pressTimer);
}).on('touchstart', function (e) {
   var target = $(e.currentTarget);
   var imagePath = target.find('img').attr('src');
   var title = target.find('.myCaption:visible').first().text();
   $('#dds-modal-title').text(title);
   $('#dds-modal-img').attr('src', imagePath);
   // Set timeout
   pressTimer = window.setTimeout(function () {
      $('#dds-modal').modal('show');
   }, 500)
});

Answer 9

إجابة Diodeus رائعة، لكنها تمنعك من إضافة وظيفة onClick، ولن تقوم أبدًا بتشغيل وظيفة الانتظار إذا قمت بالضغط على onClick.وإجابة رزاق تكاد تكون مثالية، ولكنها تعمل على تشغيل وظيفة الانتظار فقط عند رفع الماوس، وبشكل عام، تعمل الوظيفة حتى إذا استمر المستخدم في الضغط.

لذا، انضممت إلى كليهما، وقمت بما يلي:

$(element).on('click', function () {
    if(longpress) { // if detect hold, stop onclick function
        return false;
    };
});

$(element).on('mousedown', function () {
    longpress = false; //longpress is false initially
    pressTimer = window.setTimeout(function(){
    // your code here

    longpress = true; //if run hold function, longpress is true
    },1000)
});

$(element).on('mouseup', function () {
    clearTimeout(pressTimer); //clear time on mouseup
});

Answer 10

يمكنك ضبط المهلة لهذا العنصر على الماوس لأسفل ومسحه على الماوس:

$("a").mousedown(function() {
    // set timeout for this element
    var timeout = window.setTimeout(function() { /* … */ }, 1234);
    $(this).mouseup(function() {
        // clear timeout for this element
        window.clearTimeout(timeout);
        // reset mouse up event handler
        $(this).unbind("mouseup");
        return false;
    });
    return false;
});

مع هذا كل عنصر يحصل على مهلة خاصة به.

Answer 11

للمتصفحات المتنقلة الحديثة:

document.addEventListener('contextmenu', callback);

https://developer.mozilla.org/en-us/docs/web/events/contextmenu

Answer 12

يمكنك استخدام Taphold JQuery-Mobile. قم بتضمين jQuery-mobile.js وسيعمل الكود التالي بشكل جيد

$(document).on("pagecreate","#pagename",function(){
  $("p").on("taphold",function(){
   $(this).hide(); //your code
  });    
});

Answer 13

الأكثر أناقة ونظيفة هو المكون الإضافي jQuery:https://github.com/untill/jquery.longclick/، متاح أيضًا باسم Packacke:https://www.npmjs.com/package/jquery.longclick.

باختصار ، تستخدمه مثل ذلك:

$( 'button').mayTriggerLongClicks().on( 'longClick', function() { your code here } );

تتمثل ميزة هذا البرنامج المساعد في أنه ، على عكس بعض الإجابات الأخرى هنا ، لا تزال أحداث النقر ممكنًا. لاحظ أيضًا أن نقرة طويلة تحدث ، تمامًا مثل النقر الطويل على جهاز ، قبل Mouseup. لذلك ، هذه ميزة.

Answer 14

بالنسبة لي ، إنه يعمل مع هذا الرمز (مع jQuery):

var int       = null,
    fired     = false;

var longclickFilm = function($t) {
        $body.css('background', 'red');
    },
    clickFilm = function($t) {
        $t  = $t.clone(false, false);
        var $to = $('footer > div:first');
        $to.find('.empty').remove();
        $t.appendTo($to);
    },
    touchStartFilm = function(event) {
        event.preventDefault();
        fired     = false;
        int       = setTimeout(function($t) {
            longclickFilm($t);
            fired = true;
        }, 2000, $(this)); // 2 sec for long click ?
        return false;
    },
    touchEndFilm = function(event) {
        event.preventDefault();
        clearTimeout(int);
        if (fired) return false;
        else  clickFilm($(this));
        return false;
    };

$('ul#thelist .thumbBox')
    .live('mousedown touchstart', touchStartFilm)
    .live('mouseup touchend touchcancel', touchEndFilm);

Answer 15

يمكنك التحقق من الوقت لتحديد النقر أو الضغط على [jQuery

function AddButtonEventListener() {
try {
    var mousedowntime;
    var presstime;
    $("button[id$='" + buttonID + "']").mousedown(function() {
        var d = new Date();
        mousedowntime = d.getTime();
    });
    $("button[id$='" + buttonID + "']").mouseup(function() {
        var d = new Date();
        presstime = d.getTime() - mousedowntime;
        if (presstime > 999/*You can decide the time*/) {
            //Do_Action_Long_Press_Event();
        }
        else {
            //Do_Action_Click_Event();
        }
    });
}
catch (err) {
    alert(err.message);
}
} 

Answer 16

مثله؟

doc.addEeventListener("touchstart", function(){
    // your code ...
}, false);    

Answer 17

يمكنك استخدام jquery المس الأحداث. ((انظر هنا)

  let holdBtn = $('#holdBtn')
  let holdDuration = 1000
  let holdTimer

  holdBtn.on('touchend', function () {
    // finish hold
  });
  holdBtn.on('touchstart', function () {
    // start hold
    holdTimer = setTimeout(function() {
      //action after certain time of hold
    }, holdDuration );
  });

Answer 18

كنت بحاجة إلى شيء لأحداث لوحة المفاتيح Longpress ، لذلك كتبت هذا.

var longpressKeys = [13];
var longpressTimeout = 1500;
var longpressActive = false;
var longpressFunc = null;

document.addEventListener('keydown', function(e) {
    if (longpressFunc == null && longpressKeys.indexOf(e.keyCode) > -1) {
        longpressFunc = setTimeout(function() {
            console.log('longpress triggered');
            longpressActive = true;
        }, longpressTimeout);

    // any key not defined as a longpress
    } else if (longpressKeys.indexOf(e.keyCode) == -1) {
        console.log('shortpress triggered');
    }
});

document.addEventListener('keyup', function(e) {
    clearTimeout(longpressFunc);
    longpressFunc = null;

    // longpress key triggered as a shortpress
    if (!longpressActive && longpressKeys.indexOf(e.keyCode) > -1) {
        console.log('shortpress triggered');
    }
    longpressActive = false;
});