JavaScript（またはjQuery）で「長押し」を実装することは可能ですか? どのように？
(ソース: androinica.com )
HTML
<a href="" title="">Long press</a>
JavaScript
$("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 ) { ... } )
タイムアウトといくつかのマウスイベントハンドラーを使用して独自に実装するのは簡単に見えますが、同じ要素でのプレスと長押しの両方をサポートするクリック-ドラッグ-リリースのようなケースを考えると、もう少し複雑になります。 、iPad などのタッチ デバイスでの作業。私はlongclick jQuery プラグイン( Github ) を使用することになりました。携帯電話などのタッチスクリーン デバイスのみをサポートする必要がある場合は、jQuery Mobile の taphold イベントを試すこともできます。
jQuery プラグイン。置くだけ$(expression).longClick(function() { <your code here> });。2 番目のパラメーターは保持期間です。デフォルトのタイムアウトは 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);
$(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ではうまくいくように見えましたが、すべてのデバイス（samsung tab4）ではそうではありませんでした。iOSではまったく動作しませんでした。
さらに調査すると、これは要素が選択されているためであり、ネイティブの倍率がリスナーを妨害しているようです。
このイベント リスナーを使用すると、ユーザーが 500 ミリ秒画像を保持している場合に、サムネイル画像をブートストラップ モーダルで開くことができます。
レスポンシブ画像クラスを使用するため、画像のより大きなバージョンが表示されます。このコードは、(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)
});
ディオデウスの答えは素晴らしいですが、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;
});
これにより、各要素は独自のタイムアウトを取得します。
jquery-mobile のタップホールドを使用できます。jquery-mobile.js を含めると、次のコードが正常に機能します。
$(document).on("pagecreate","#pagename",function(){
$("p").on("taphold",function(){
$(this).hide(); //your code
});
});
これは私のために働いた：
const a = document.querySelector('a');
a.oncontextmenu = function() {
console.log('south north');
};
https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/oncontextmenu
For me it's work with that code (with 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);
このような？
target.addEeventListener("touchstart", function(){
// your code ...
}, false);
クリックや長押しを特定する時間を確認できる【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);
}
}