자바스크립트로 길게 누르기?
자바스크립트(또는 jQuery)에서 "긴 프레스"를 구현할 수 있습니까?어떻게?
(출처: androinica.com )
HTML
<a href="" title="">Long press</a>
자바스크립트
$("a").mouseup(function(){
// Clear timeout
return false;
}).mousedown(function(){
// Set timeout
return false;
});
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;
});
메이코 모우라의 답변을 바탕으로 이렇게 썼습니다.또한 사용자가 마우스 오른쪽 버튼을 누르지 않도록 하여 장시간 누르면 모바일 장치에서 작동합니다.
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의 tapold 이벤트를 사용할 수 있습니다.
jQuery("a").on("taphold", function( event ) { ... } )
이를 해결하기 위해 롱 프레스 이벤트(0.5k 순수 JS)를 만들었습니다.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와 같은 터치 장치로 작업하는 것과 같은 경우를 고려하면 좀 더 복잡해집니다.저는 결국 롱클릭 jQuery 플러그인(Github)을 사용하게 되었고, 이것은 저를 위해 그것들을 처리해줍니다.휴대 전화와 같은 터치 스크린 장치만 지원해야 하는 경우 jQuery Mobile 탭홀드 이벤트도 시도할 수 있습니다.
최신 모바일 브라우저의 경우:
document.addEventListener('contextmenu', callback);
https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu
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);
$(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;
});
});
크로스 플랫폼 개발자의 경우(참고: 지금까지 제공된 모든 답변은 iOS에서 작동하지 않습니다.)
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)
});
Diodeus의 답변은 훌륭하지만 onClick 기능을 추가할 수 없습니다. OnClick을 누르면 보류 기능이 실행되지 않습니다.그리고 Razzak의 대답은 거의 완벽하지만, 그것은 오직 마우스 위에서만 홀드 기능을 실행하고, 일반적으로 사용자가 계속해서 홀드를 해도 그 기능은 실행됩니다.
그래서 저는 둘 다 참여했고, 이것을 만들었습니다.
$(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
});
마우스를 누른 상태에서 해당 요소의 시간 초과를 설정하고 마우스를 올린 상태에서 지울 수 있습니다.
$("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;
});
이를 통해 각 요소는 고유한 시간 제한을 받습니다.
이것은 저에게 효과가 있었습니다.
const a = document.querySelector('a');
a.oncontextmenu = function() {
console.log('south north');
};
https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/oncontextmenu
당신은 jquery-mobile의 tapold를 사용할 수 있습니다.jquery-mobile.js를 포함하면 다음 코드가 잘 작동합니다.
$(document).on("pagecreate","#pagename",function(){
$("p").on("taphold",function(){
$(this).hide(); //your code
});
});
가장 우아하고 깨끗한 것은 jQuery 플러그인: https://github.com/untill/jquery.longclick/, 이며 패키지: https://www.npmjs.com/package/jquery.longclick 로도 사용할 수 있습니다.
간단히 말해서, 다음과 같이 사용합니다.
$( 'button').mayTriggerLongClicks().on( 'longClick', function() { your code here } );
이 플러그인의 장점은 여기에 있는 다른 답변과 달리 클릭 이벤트가 여전히 가능하다는 것입니다.마우스를 올리기 전에 장치를 길게 누르는 것과 마찬가지로 긴 클릭이 발생합니다.이것이 특징입니다.
저는 롱 프레스 키보드 행사에 필요한 것이 있어서 이것을 썼습니다.
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;
});
vanila JS에서 클릭 해제 후 긴 클릭을 감지해야 하는 경우:
document.addEventListener("mousedown", longClickHandler, true);
document.addEventListener("mouseup", longClickHandler, true);
let startClick = 0;
function longClickHandler(e){
if(e.type == "mousedown"){
startClick = e.timeStamp;
}
else if(e.type == "mouseup" && startClick > 0){
if(e.timeStamp - startClick > 500){ // 0.5 secound
console.log("Long click !!!");
}
}
}
클릭하는 동안 길게 클릭을 확인해야 할 경우 타이머를 사용해야 할 수 있습니다.그러나 대부분의 경우 릴리스 후 클릭만으로 충분합니다.
저는 이 코드로 작업합니다(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);
Click 또는 Long Press [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);
}
}
사용할 수 있습니다.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 );
});
이렇게요?
target.addEeventListener("touchstart", function(){
// your code ...
}, false);
언급URL : https://stackoverflow.com/questions/2625210/long-press-in-javascript
'programing' 카테고리의 다른 글
| 웅변적인 컬렉션: 각각 vs. (0) | 2023.08.09 |
|---|---|
| SQL Server Management Studio [Schema and data]를 사용하여 테이블을 다시 만드는 스크립트를 생성하는 방법은 무엇입니까? (0) | 2023.08.09 |
| sqlalchemy 및 pyodbc를 사용하여 SQL Server 2012에 연결 (0) | 2023.08.09 |
| 드롭존에 기존 이미지 파일 추가 (0) | 2023.08.09 |
| 안드로이드에서 이미지 회전을 원활하게 하는 방법은 무엇입니까? (0) | 2023.08.09 |