[javascript] JavaScript에서 길게 누르시겠습니까?

자바 스크립트 (또는 jQuery)에서 “길게 누르기”를 구현할 수 있습니까? 어떻게?

HTML

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

자바 스크립트

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

답변

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

답변

Maycow Moura의 답변을 바탕으로 이것을 썼습니다. 또한 사용자가 마우스 오른쪽 버튼을 클릭하지 않았는지 확인하여 길게 누르면 모바일 장치에서 작동합니다. 데모

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

답변

jQuery 모바일 API의 탭 홀드 이벤트를 사용할 수 있습니다 .

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

답변

내가 만든 긴 프레스 이벤트 (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 및 하이브리드 모바일 앱에서 작동합니다 (iOS / Android의 Cordova 및 Ionic).

데모

답변

타임 아웃과 몇 가지 마우스 이벤트 핸들러를 사용하여 자체적으로 구현할 수있을만큼 간단 해 보이지만 동일한 요소에서 누르기와 길게 누르기를 모두 지원하는 클릭-드래그-릴리스와 같은 경우를 고려하면 조금 더 복잡해집니다. , iPad와 같은 터치 장치로 작업합니다. 결국 longclick jQuery 플러그인 ( Github )을 사용하게 되었습니다 . 휴대폰과 같은 터치 스크린 장치 만 지원해야하는 경우 jQuery Mobile taphold 이벤트를 사용해 볼 수도 있습니다 .

답변

jQuery 플러그인. 그냥 넣어 $(expression).longClick(function() { <your code here> });. 두 번째 매개 변수는 유지 기간입니다. 기본 시간 제한은 500ms입니다.

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

답변

크로스 플랫폼 개발자의 경우 (참고 지금까지 제공된 모든 답변은 iOS에서 작동하지 않습니다) :

Mouseup / down은 Android 에서 제대로 작동하는 것처럼 보였지만 모든 장치 (예 : 삼성 탭 4)는 아닙니다. iOS 에서 전혀 작동하지 않았습니다. .

추가 연구는 이것이 선택을 갖는 요소 때문이며 기본 배율이 청취자를 방해하는 것으로 보입니다.

이 이벤트 리스너는 사용자가 이미지를 500ms 동안 보유하는 경우 부트 스트랩 모달에서 축소판 이미지를 열 수 있도록합니다.

반응 형 이미지 클래스를 사용하므로 더 큰 버전의 이미지를 표시합니다. 이 코드는 (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)
});