Tekan Lama di JavaScript?

Apakah mungkin untuk menerapkan "tekan lama" di JavaScript (atau jQuery)? Bagaimana?

_{(sumber: androinica.com )}

HTML

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

JavaScript

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

Tidak ada keajaiban 'jQuery', hanya pengatur waktu 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; 
});

Berdasarkan jawaban Maycow Moura, saya menulis ini. Ini juga memastikan bahwa pengguna tidak melakukan klik kanan, yang akan memicu pers lama dan berfungsi pada perangkat seluler. DEMO

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);

Anda juga harus memasukkan beberapa indikator menggunakan animasi 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; }
}

Anda dapat menggunakan acara taphold dari jQuery mobile API.

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

Saya membuat acara pers-lama (JavaScript murni 0,5k) untuk menyelesaikan ini, ini menambahkan long-pressacara ke DOM.

Dengarkan long-pressdi setiap elemen:

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

Dengarkan long-presspada elemen tertentu :

// 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);
});

Bekerja di IE9 +, Chrome, Firefox, Safari & aplikasi seluler hybrid (Cordova & Ionic di iOS / Android)

Demo

Meskipun terlihat cukup sederhana untuk diterapkan sendiri dengan batas waktu dan beberapa penangan peristiwa mouse, ini menjadi sedikit lebih rumit saat Anda mempertimbangkan kasus seperti klik-seret-rilis, mendukung pers dan tekan lama pada elemen yang sama , dan bekerja dengan perangkat sentuh seperti iPad. Saya akhirnya menggunakan plugin longclick jQuery ( Github ), yang menangani hal itu untuk saya. Jika Anda hanya perlu mendukung perangkat layar sentuh seperti ponsel, Anda juga dapat mencoba acara taphold jQuery Mobile .

plugin jQuery. Taruh saja $(expression).longClick(function() { <your code here> });. Parameter kedua adalah durasi penahanan; batas waktu default adalah 500 md.

(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);

Untuk pengembang lintas platform (Catatan Semua jawaban yang diberikan sejauh ini tidak akan berfungsi di iOS) :

Mouse atas / bawah sepertinya berfungsi dengan baik di android - tetapi tidak semua perangkat (samsung tab4). Tidak berfungsi sama sekali di iOS .

Penelitian lebih lanjut tampaknya bahwa hal ini disebabkan oleh elemen yang memiliki seleksi dan pembesaran asli mengganggu pendengar.

Pemroses kejadian ini memungkinkan gambar mini dibuka dalam modal bootstrap, jika pengguna memegang gambar selama 500 md.

Ini menggunakan kelas gambar responsif oleh karena itu menampilkan versi gambar yang lebih besar. Potongan kode ini telah diuji sepenuhnya (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)
});

$(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;
    });
});

DEMO

Jawaban Diodeus luar biasa, tetapi itu mencegah Anda untuk menambahkan fungsi onClick, itu tidak akan pernah menjalankan fungsi tahan jika Anda meletakkan onclick. Dan jawaban Razzak hampir sempurna, tetapi menjalankan fungsi tahan hanya pada mouseup, dan umumnya, fungsi tersebut berjalan meskipun pengguna terus menahannya.

Jadi, saya bergabung dengan keduanya, dan membuat ini:

$(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
});

Untuk peramban seluler modern:

document.addEventListener('contextmenu', callback);

https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu

Anda dapat menyetel batas waktu untuk elemen itu di mouse ke bawah dan menghapusnya di mouse ke atas:

$("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;
});

Dengan ini, setiap elemen mendapatkan batas waktunya sendiri.

Anda dapat menggunakan taphold jquery-mobile. Sertakan jquery-mobile.js dan kode berikut akan berfungsi dengan baik

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

Paling elegan dan bersih adalah plugin jQuery: https://github.com/untill/jquery.longclick/ , juga tersedia sebagai paket: https://www.npmjs.com/package/jquery.longclick .

Singkatnya, Anda menggunakannya seperti ini:

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

Keuntungan dari plugin ini adalah, berbeda dengan beberapa jawaban lain di sini, peristiwa klik masih memungkinkan. Perhatikan juga bahwa klik lama terjadi, seperti ketukan lama pada perangkat, sebelum mouse naik. Jadi, itulah fitur.

Bagi saya, ini berfungsi dengan kode itu (dengan 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);

Anda dapat memeriksa waktu untuk mengidentifikasi Klik atau Tekan Lama [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);
}
} 

seperti ini?

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

Anda dapat menggunakan jqueryacara Touch. ( lihat disini )

  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 );
  });

Saya membutuhkan sesuatu untuk acara keyboard longpress, jadi saya menulis ini.

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;
});

Saya rasa ini dapat membantu Anda:

var image_save_msg = 'You Can Not Save images!';
var no_menu_msg = 'Context Menu disabled!';
var smessage = "Content is protected !!";

function disableEnterKey(e) {
    if (e.ctrlKey) {
        var key;
        if (window.event)
            key = window.event.keyCode; //IE
        else
            key = e.which; //firefox (97)
        //if (key != 17) alert(key);
        if (key == 97 || key == 65 || key == 67 || key == 99 || key == 88 || key == 120 || key == 26 || key == 85 || key == 86 || key == 83 || key == 43) {
            show_wpcp_message('You are not allowed to copy content or view source');
            return false;
        } else
            return true;
    }
}

function disable_copy(e) {
    var elemtype = e.target.nodeName;
    var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
    elemtype = elemtype.toUpperCase();
    var checker_IMG = '';
    if (elemtype == "IMG" && checker_IMG == 'checked' && e.detail >= 2) {
        show_wpcp_message(alertMsg_IMG);
        return false;
    }
    if (elemtype != "TEXT" && elemtype != "TEXTAREA" && elemtype != "INPUT" && elemtype != "PASSWORD" && elemtype != "SELECT" && elemtype != "OPTION" && elemtype != "EMBED") {
        if (smessage !== "" && e.detail == 2)
            show_wpcp_message(smessage);

        if (isSafari)
            return true;
        else
            return false;
    }
}

function disable_copy_ie() {
    var elemtype = window.event.srcElement.nodeName;
    elemtype = elemtype.toUpperCase();
    if (elemtype == "IMG") {
        show_wpcp_message(alertMsg_IMG);
        return false;
    }
    if (elemtype != "TEXT" && elemtype != "TEXTAREA" && elemtype != "INPUT" && elemtype != "PASSWORD" && elemtype != "SELECT" && elemtype != "OPTION" && elemtype != "EMBED") {
        //alert(navigator.userAgent.indexOf('MSIE'));
        //if (smessage !== "") show_wpcp_message(smessage);
        return false;
    }
}

function reEnable() {
    return true;
}
document.onkeydown = disableEnterKey;
document.onselectstart = disable_copy_ie;
if (navigator.userAgent.indexOf('MSIE') == -1) {
    document.onmousedown = disable_copy;
    document.onclick = reEnable;
}

function disableSelection(target) {
    //For IE This code will work
    if (typeof target.onselectstart != "undefined")
        target.onselectstart = disable_copy_ie;

    //For Firefox This code will work
    else if (typeof target.style.MozUserSelect != "undefined") {
        target.style.MozUserSelect = "none";
    }

    //All other  (ie: Opera) This code will work
    else
        target.onmousedown = function() {
            return false
        }
    target.style.cursor = "default";
}
// on_body_load

window.onload = function() {
    disableSelection(document.body);
};



// disable_Right_Click



document.ondragstart = function() {
    return false;
}

function nocontext(e) {
    return false;
}
document.oncontextmenu = nocontext;