$(function()
{
$("#one").bind("taphold", function() { console.log("\ntap and hold on ONE"); });
$("#two").on("taphold", function() { console.log("\ntap and hold on TWO"); });
$("#three").on("taphold",
{clickHandler: function() { console.log("\nclick on THREE"); }},
function() { console.log("\ntap and hold on THREE"); });
$("#four").on("taphold", function() { console.log("\ntap and hold on FOUR"); })
.on("click", function() { console.log("\nclick on FOUR"); });
$("#seven").on("taphold", {duration: 5000}, function() { console.log("\ntap and hold on SEVEN"); });
});
.events div {
width: 100px;
height: 100px;
margin: 20px;
float: left;
padding: 10px;
font-weight: bold;
}
.events #one {
background: #f00;
}
.events #two {
background: #0f0;
}
.events #three {
background: #000;
color: #fff;
}
.events #four {
background: #fff;
color: #000;
border: 1px solid #000;
}
.events #five {
background: #dcda07;
color: #000;
}
.events #six {
background: #f10fff;
color: #000;
}
.events #seven {
background: #3cc9f4;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// @author Rich Adams <[email protected]>
// Implements a tap and hold functionality. If you click/tap and release, it will trigger a normal
// click event. But if you click/tap and hold for 1s (default), it will trigger a taphold event instead.
;(function($)
{
// Default options
var defaults = {
duration: 1000, // ms
clickHandler: null
}
// When start of a taphold event is triggered.
function startHandler(event)
{
var $elem = jQuery(this);
// Merge the defaults and any user defined settings.
settings = jQuery.extend({}, defaults, event.data);
// If object also has click handler, store it and unbind. Taphold will trigger the
// click itself, rather than normal propagation.
if (typeof $elem.data("events") != "undefined"
&& typeof $elem.data("events").click != "undefined")
{
// Find the one without a namespace defined.
for (var c in $elem.data("events").click)
{
if ($elem.data("events").click[c].namespace == "")
{
var handler = $elem.data("events").click[c].handler
$elem.data("taphold_click_handler", handler);
$elem.unbind("click", handler);
break;
}
}
}
// Otherwise, if a custom click handler was explicitly defined, then store it instead.
else if (typeof settings.clickHandler == "function")
{
$elem.data("taphold_click_handler", settings.clickHandler);
}
// Reset the flags
$elem.data("taphold_triggered", false); // If a hold was triggered
$elem.data("taphold_clicked", false); // If a click was triggered
$elem.data("taphold_cancelled", false); // If event has been cancelled.
// Set the timer for the hold event.
$elem.data("taphold_timer",
setTimeout(function()
{
// If event hasn't been cancelled/clicked already, then go ahead and trigger the hold.
if (!$elem.data("taphold_cancelled")
&& !$elem.data("taphold_clicked"))
{
// Trigger the hold event, and set the flag to say it's been triggered.
$elem.trigger(jQuery.extend(event, jQuery.Event("taphold")));
$elem.data("taphold_triggered", true);
}
}, settings.duration));
}
// When user ends a tap or click, decide what we should do.
function stopHandler(event)
{
var $elem = jQuery(this);
// If taphold has been cancelled, then we're done.
if ($elem.data("taphold_cancelled")) { return; }
// Clear the hold timer. If it hasn't already triggered, then it's too late anyway.
clearTimeout($elem.data("taphold_timer"));
// If hold wasn't triggered and not already clicked, then was a click event.
if (!$elem.data("taphold_triggered")
&& !$elem.data("taphold_clicked"))
{
// If click handler, trigger it.
if (typeof $elem.data("taphold_click_handler") == "function")
{
$elem.data("taphold_click_handler")(jQuery.extend(event, jQuery.Event("click")));
}
// Set flag to say we've triggered the click event.
$elem.data("taphold_clicked", true);
}
}
// If a user prematurely leaves the boundary of the object we're working on.
function leaveHandler(event)
{
// Cancel the event.
$(this).data("taphold_cancelled", true);
}
// Determine if touch events are supported.
var touchSupported = ("ontouchstart" in window) // Most browsers
|| ("onmsgesturechange" in window); // Microsoft
var taphold = $.event.special.taphold =
{
setup: function(data)
{
$(this).bind((touchSupported ? "touchstart" : "mousedown"), data, startHandler)
.bind((touchSupported ? "touchend" : "mouseup"), stopHandler)
.bind((touchSupported ? "touchmove touchcancel" : "mouseleave"), leaveHandler);
},
teardown: function(namespaces)
{
$(this).unbind((touchSupported ? "touchstart" : "mousedown"), startHandler)
.unbind((touchSupported ? "touchend" : "mouseup"), stopHandler)
.unbind((touchSupported ? "touchmove touchcancel" : "mouseleave"), leaveHandler);
}
};
})(jQuery);
</script>
<div class="events">
<div id="one">ONE<br/><br/>tap-hold</div>
<div id="two">TWO<br/><br/>tap-hold (alt)</div>
<div id="three">THREE<br/><br/>tap-hold<br/>click</div>
<div id="four">FOUR<br/><br/>tap-hold<br/>click (alt)</div>
<div id="seven">SEVEN<br/><br/>5s<br/>tap-hold</div>
</div>
感謝。しかし、私たちはサイト全体にjquery mobileを使用しておらず、この1つの機能のためにjquery mobileを追加することはできません。 –
githubで見つけた小さなライブラリを使って新しい例を追加しました。 jQueryのみを使用します。私はこれが役立つことを願っています – gforce301
ありがとう@ gforce301、私はあなたの答えに投票しました。私はそれがうまくいくかどうかテストしてお知らせします。私は本当にあなたの助けに感謝します。どうもありがとうございます。 –