복붙노트

[JQUERY] 자바 스크립트에서 길게 누름?

JQUERY

자바 스크립트에서 길게 누름?

해결법

  1. 1.더 'jQuery를'마법, 단지 자바 스크립트 타이머가 없습니다.

    더 'jQuery를'마법, 단지 자바 스크립트 타이머가 없습니다.

    var pressTimer;

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

  2. 2.Maycow 모 우라의 답변에 따라,이를 썼다. 또한 사용자가 모바일 장치에 긴 언론과 작품을 발생하게 오른쪽 클릭을하지 않았다 보장합니다. 데모

    Maycow 모 우라의 답변에 따라,이를 썼다. 또한 사용자가 모바일 장치에 긴 언론과 작품을 발생하게 오른쪽 클릭을하지 않았다 보장합니다. 데모

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

  3. 3.당신은 jQuery를 모바일 API의 taphold 이벤트를 사용할 수 있습니다.

    당신은 jQuery를 모바일 API의 taphold 이벤트를 사용할 수 있습니다.

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

  4. 4.나는이 문제를 해결하기 위해 긴 프레스 이벤트 (0.5K 순수 JavaScript)를 만들어, 그것은 DOM에 긴 프레스 이벤트를 추가합니다.

    나는이 문제를 해결하기 위해 긴 프레스 이벤트 (0.5K 순수 JavaScript)를 만들어, 그것은 DOM에 긴 프레스 이벤트를 추가합니다.

    모든 요소에 긴 프레스를 수신 :

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

    특정 요소에 긴 프레스를 수신 :

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

    (아이폰 OS / 안드로이드 코르도바와 이온) IE9 +, 크롬, 파이어 폭스, 사파리 및 하이브리드 모바일 앱 작품

    데모

  5. 5.이 시간 제한 및 마우스 이벤트 핸들러의 부부와 함께 직접 구현하는 표정 간단한에 충분히 않지만, 같은 요소에 언론과 장기를 눌러 모두를 지원하는, 당신은 클릭 - 드래그 앤 릴리스 같은 경우를 고려할 때 더 복잡 조금을 얻는다 그리고 아이 패드와 같은 터치 장치로 작업. 나를 위해 그 물건을 담당 longclick jQuery를 플러그인 (Github에서)를 사용하여 끝났다. 당신은 휴대 전화와 같은 지원 터치 스크린 장치에 필요한 경우, 당신은 또한 jQuery를 모바일 taphold 이벤트를 시도 할 수 있습니다.

    이 시간 제한 및 마우스 이벤트 핸들러의 부부와 함께 직접 구현하는 표정 간단한에 충분히 않지만, 같은 요소에 언론과 장기를 눌러 모두를 지원하는, 당신은 클릭 - 드래그 앤 릴리스 같은 경우를 고려할 때 더 복잡 조금을 얻는다 그리고 아이 패드와 같은 터치 장치로 작업. 나를 위해 그 물건을 담당 longclick jQuery를 플러그인 (Github에서)를 사용하여 끝났다. 당신은 휴대 전화와 같은 지원 터치 스크린 장치에 필요한 경우, 당신은 또한 jQuery를 모바일 taphold 이벤트를 시도 할 수 있습니다.

  6. 6.jQuery 플러그인. 그냥 ({<여기에 코드>} 기능 ()) $ (표현) .longClick를 넣어 ;. 두 번째 매개 변수는 보류 기간입니다; 기본 제한 시간은 500 밀리 초입니다.

    jQuery 플러그인. 그냥 ({<여기에 코드>} 기능 ()) $ (표현) .longClick를 넣어 ;. 두 번째 매개 변수는 보류 기간입니다; 기본 제한 시간은 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);

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

    데모

  8. 8.크로스 플랫폼 개발자 (iOS에서 작동하지 않습니다 지금까지 주어진 모든 답변을 참고)

    크로스 플랫폼 개발자 (iOS에서 작동하지 않습니다 지금까지 주어진 모든 답변을 참고)

    이는 MouseUp은 / 아래로 안드로이드에 괜찮 일 듯 -하지만 (삼성 탭 4)의 모든 장치. iOS에서 전혀 작동하지 않았다.

    앞으로의 연구는이이 요소를 갖는 선택과 기본 배율 interrupts를 청취자로 인한 것으로 보인다.

    이 이벤트 리스너는 사용자가 500ms의 이미지를 보유하고있는 경우 썸네일 이미지는 부트 스트랩 모달에서 열 수 있습니다.

    그것은 응답 이미지 클래스 따라서 이미지의 더 큰 버전을 표시합니다. 이 코드 조각은 완전히 (아이 패드 / Tab4 / 타바 / 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)
});

  9. 9.현대, 모바일 브라우저의 경우 :

    현대, 모바일 브라우저의 경우 :

    document.addEventListener('contextmenu', callback);

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

  10. 10.Diodeus의 대답은 굉장하다, 그러나 당신이 온 클릭를 넣어 경우, 그것은 홀드 기능 실행하지 않을거야 온 클릭 기능을 추가하는 것을 방지한다. 그리고 Razzak의 대답은 거의 완벽하지만, 그것은 단지와 mouseUp에 홀드 기능을 실행, 일반적으로, 기능도 사용자 킵 홀딩 경우 실행됩니다.

    Diodeus의 대답은 굉장하다, 그러나 당신이 온 클릭를 넣어 경우, 그것은 홀드 기능 실행하지 않을거야 온 클릭 기능을 추가하는 것을 방지한다. 그리고 Razzak의 대답은 거의 완벽하지만, 그것은 단지와 mouseUp에 홀드 기능을 실행, 일반적으로, 기능도 사용자 킵 홀딩 경우 실행됩니다.

    그래서, 모두 합류하고,이를했다 :

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

  11. 11.당신은 마우스 아래에 해당 요소에 대한 시간 제한을 설정하고 위로 마우스를 취소 할 수 :

    당신은 마우스 아래에 해당 요소에 대한 시간 제한을 설정하고 위로 마우스를 취소 할 수 :

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

    이와 함께 각 요소는 자체 제한 시간을 가져옵니다.

  12. 12.당신은 JQuery와 모바일의 taphold를 사용할 수 있습니다. JQuery와 - mobile.js은 포함하고 다음 코드는 잘 작동합니다

    당신은 JQuery와 모바일의 taphold를 사용할 수 있습니다. JQuery와 - mobile.js은 포함하고 다음 코드는 잘 작동합니다

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

  13. 13.대부분의 우아하고 깨끗한 jQuery 플러그인은 다음과 같습니다 https://github.com/untill/jquery.longclick/, 도 사용할 수 packacke로 : https://www.npmjs.com/package/jquery.longclick.

    대부분의 우아하고 깨끗한 jQuery 플러그인은 다음과 같습니다 https://github.com/untill/jquery.longclick/, 도 사용할 수 packacke로 : https://www.npmjs.com/package/jquery.longclick.

    즉, 당신과 같이 사용 :

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

    이 플러그인의 장점은 여기에 다른 답변의 일부는 대조적으로, 이벤트가 여전히 가능 클릭 있다는 것입니다. 긴 클릭은 mouseup에 전에, 단지 장치에 긴 탭처럼, 발생도합니다. 그래서, 그 특징이다.

  14. 14.내가 쓴 그래서 나는, 길게 누르면 키보드 이벤트에 대한 뭔가가 필요했다.

    내가 쓴 그래서 나는, 길게 누르면 키보드 이벤트에 대한 뭔가가 필요했다.

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

  15. 15.나에게는 (jQuery로) 그 코드 작업입니다 :

    나에게는 (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);

  16. 16.당신은 클릭을 식별하거나 시간을 확인할 수 있습니다 길게 누름 [jQuery를]

    당신은 클릭을 식별하거나 시간을 확인할 수 있습니다 길게 누름 [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);
}
}

  17. 17.이 같은?

    이 같은?

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

  18. 18.당신은 JQuery와 터치 이벤트를 사용할 수 있습니다. (여기를 보아라)

    당신은 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 );
  });

  19. 19.내가 당신을 도울 수 있다고 생각합니다 :

    내가 당신을 도울 수 있다고 생각합니다 :

    var에 image_save_msg의 = '당신은 할 수 없습니다 이미지를 저장합니다!'; var에 no_menu_msg은 = '상황에 맞는 메뉴는 사용할 수 없습니다!'; var에 smessage는 = "콘텐츠 보호!"; disableEnterKey 함수 (E) { 경우 (e.ctrlKey) { VAR 키; 경우 (window.event를) 키를 window.event.keyCode =; // IE 그밖에 키 = e.which; // 파이어 (97) (! 키 = 17) // 경우 경고 (키); 경우 (키 == 97 || 키 == 65 || 키 == 67 || 키 == 99 || 키 == 88 || 키 == 120 || 키 == 26 || 키 == 85 || 키 == 86 || 키 == 83 || 키 == 43) { show_wpcp_message ( '당신은 사본의 내용이나 소스보기를 사용할 수 없습니다'); false를 반환; } 다른 true를 반환; } } 함수 disable_copy (E) { VAR elemtype = e.target.nodeName; VAR isSafari = /Safari/.test(navigator.userAgent) && / 애플 컴퓨터 / .test (navigator.vendor); elemtype elemtype.toUpperCase = (); VAR checker_IMG은 ''; (elemtype == "IMG"&& checker_IMG가 == '확인'&& e.detail> = 2) 경우에 { show_wpcp_message (alertMsg_IMG); false를 반환; } 경우 (elemtype! = "TEXT"&& elemtype! = "TEXTAREA"&& elemtype! = "INPUT"&& elemtype! = "PASSWORD"&& elemtype! =! = "OPTION"&& elemtype을 && elemtype를 "선택"! = "EMBED" ) { 경우 (smessage! == ""&& e.detail == 2) show_wpcp_message (smessage); 경우 (isSafari) true를 반환; 그밖에 false를 반환; } } disable_copy_ie 함수 () { VAR elemtype = window.event.srcElement.nodeName; elemtype elemtype.toUpperCase = (); 경우 (elemtype == "IMG") { show_wpcp_message (alertMsg_IMG); false를 반환; } 경우 (elemtype! = "TEXT"&& elemtype! = "TEXTAREA"&& elemtype! = "INPUT"&& elemtype! = "PASSWORD"&& elemtype! =! = "OPTION"&& elemtype을 && elemtype를 "선택"! = "EMBED" ) { //alert(navigator.userAgent.indexOf('MSIE ')); // 경우 (smessage == ""!) show_wpcp_message (smessage); false를 반환; } } 다시 활성화 함수 () { true를 반환; } document.onkeydown = disableEnterKey; document.onselectstart = disable_copy_ie; 경우 (navigator.userAgent.indexOf ( 'MSIE') == -1) { document.onmousedown = disable_copy; document.onclick = 재실행; } disableSelection 함수 (목표) { IE의 경우이 코드는 작동합니다 // 경우 (대해서 typeof target.onselectstart는! = "정의되지 않은") target.onselectstart = disable_copy_ie; 파이어 폭스의 경우이 코드는 작동합니다 // 다른 경우 {(target.style.MozUserSelect 대해서 typeof! = "정의되지 않은") target.style.MozUserSelect = "없음"; } // 다른 모든 (예 : 오페라)이 코드 의지 작업 그밖에 target.onmousedown = 함수 () { 반환 거짓 } target.style.cursor = "기본"; } // on_body_load 창로드 = 함수 () { disableSelection (는 document.body); }; // disable_Right_Click document.ondragstart = 함수 () { false를 반환; } 함수 nocontext (E) { false를 반환; } document.oncontextmenu = nocontext;

    20. from https://stackoverflow.com/questions/2625210/long-press-in-javascript by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JQuery와 자바 스크립트를 사용하여로드 된 경우 확인  (0) 2020.10.14
[JQUERY] jQuery를 사용하여 링크에 클릭을 유발하는 방법  (0) 2020.10.14
[JQUERY] 특정 지점에서 스크롤 위치를 고정 중지?  (0) 2020.10.14
[JQUERY] 번호 세 자리마다에 쉼표를 추가  (0) 2020.10.14
[JQUERY] 런타임에 jQuery를 가진 CSS 규칙 / 클래스 만들기  (0) 2020.10.14
,

티스토리툴바