JavaScript'te Uzun Basıyor musunuz?

JavaScript'te (veya jQuery'de) "uzun basış" uygulamak mümkün müdür? Nasıl?

_{(kaynak: androinica.com )}

HTML

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

JavaScript

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

'JQuery' büyüsü yoktur, sadece JavaScript zamanlayıcıları vardır.

var pressTimer;

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

Maycow Moura'nın cevabına dayanarak bunu yazdım. Ayrıca, kullanıcının bir sağ tıklama yapmamasını sağlar, bu da uzun bir basmayı tetikler ve mobil cihazlarda çalışır. 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);

CSS animasyonlarını kullanan bazı göstergeleri de eklemelisiniz:

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

JQuery mobile API'nin taphold olayını kullanabilirsiniz .

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

Bunu çözmek için uzun basış olayı (0,5k saf JavaScript)long-press oluşturdum, DOM'a bir olay ekliyor .

Bir dinleyin long-pressüzerinde herhangi elemanı:

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

Bir dinleyin long-pressbir üzerinde belirli elemanı:

// 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 ve hibrit mobil uygulamalarda çalışır (iOS / Android'de Cordova ve Ionic)

gösteri

Bir zaman aşımı ve birkaç fare olay işleyicisi ile kendi başınıza uygulamak için yeterince basit görünse de, aynı öğeye hem basmayı hem de uzun basmayı destekleyen tıklama-sürükle-bırak gibi durumları düşündüğünüzde biraz daha karmaşık hale geliyor. ve iPad gibi dokunmatik cihazlarla çalışma. Bu şeyleri benim için halleden longclick jQuery eklentisini ( Github ) kullandım. Yalnızca cep telefonları gibi dokunmatik ekranlı cihazları desteklemeniz gerekiyorsa, jQuery Mobile taphold olayını da deneyebilirsiniz .

jQuery eklentisi. Sadece koyun $(expression).longClick(function() { <your code here> });. İkinci parametre tutma süresidir; varsayılan zaman aşımı 500 ms'dir.

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

Çapraz platform geliştiricileri için (Not Şimdiye kadar verilen tüm yanıtlar iOS'ta çalışmayacaktır) :

Fare yukarı / aşağı, android üzerinde iyi çalışıyor gibi görünüyordu - ancak tüm cihazlarda değil, yani (samsung tab4). Üzerinde hiç çalışmaz mı iOS .

Daha fazla araştırma, bunun seçime sahip öğeden kaynaklandığı ve yerel büyütmenin dinleyiciyi rahatsız ettiği görülüyor.

Bu olay dinleyici, kullanıcı görüntüyü 500 ms tutarsa, bir önyükleme modelinde bir küçük resim görüntüsünün açılmasını sağlar.

Duyarlı bir görüntü sınıfı kullanır, bu nedenle görüntünün daha büyük bir versiyonunu gösterir. Bu kod parçası (iPad / Tab4 / TabA / Galaxy4) üzerinde tam olarak test edilmiştir:

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

Diodeus'un cevabı harika, ancak bir onClick işlevi eklemenizi engelliyor, bir onclick yaparsanız asla bekletme işlevini çalıştırmaz. Ve Razzak'ın cevabı neredeyse mükemmel, ancak bekletme işlevini yalnızca mouseup üzerinde çalıştırıyor ve genellikle işlev, kullanıcı tutmaya devam etse bile çalışıyor.

Böylece ikisine de katıldım ve şunu yaptım:

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

Modern, mobil tarayıcılar için:

document.addEventListener('contextmenu', callback);

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

Bu öğe için zaman aşımını fareye basılıyken ayarlayabilir ve fareyi yukarı kaydırdığınızda temizleyebilirsiniz:

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

Bununla her öğe kendi zaman aşımına sahip olur.

Jquery-mobile'ın tafoldunu kullanabilirsiniz. Jquery-mobile.js'yi ekleyin ve aşağıdaki kod sorunsuz çalışacaktır

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

En zarif ve temiz bir jQuery eklentisidir: https://github.com/untill/jquery.longclick/ , ayrıca packacke olarak da mevcuttur: https://www.npmjs.com/package/jquery.longclick .

Kısacası, bunu şu şekilde kullanıyorsunuz:

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

Bu eklentinin avantajı, buradaki diğer bazı cevapların aksine tıklama olaylarının hala mümkün olmasıdır. Ayrıca fareyi kaldırmadan önce, bir cihaza uzun bir dokunma gibi uzun bir tıklama gerçekleştiğini de unutmayın. Yani bu bir özellik.

Benim için bu kodla çalışır (jQuery ile):

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

Tıklama veya Uzun Basma [jQuery] 'yi belirleme süresini kontrol edebilirsiniz

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

bunun gibi?

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

jqueryDokunma olaylarını kullanabilirsiniz . ( buraya bakın )

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

Uzun süreli klavye olayları için bir şeye ihtiyacım vardı, bu yüzden bunu yazdım.

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

Bunun size yardımcı olabileceğini düşünüyorum:

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;