jQuery 中的 Longpress / longclick 事件支持 / 插件答案

【问题标题】：Longpress / longclick event support / plugin in jQueryjQuery 中的 Longpress / longclick 事件支持 / 插件
【发布时间】：2012-08-27 14:51:06
【问题描述】：

我正在开发一个需要鼠标悬停菜单的网站。从可访问性的角度来看，我不推荐鼠标悬停菜单，但使用 jQuery 很容易实现。

问题：我们还需要支持触摸屏设备（平板电脑）。在这样的设备上，您没有鼠标，因此 mouseover 事件不起作用。我希望 jQuery 有一个 longpress 事件，但它没有。我确实使用 Google 找到了jQuery longclick plugin，但它是针对 jQuery 1.4 的，所以我不热衷于使用它。此外，jQuery 插件站点目前正在维护中，所以这不是很有帮助。

那么问题来了：jQuery 1.7 / 1.8 是否有一个优雅的插件来支持 longpress / longclick 事件？

【问题讨论】：

使用mousedown、mouseup、setTimeout和clearTimeout的组合，创建自定义longpress事件应该相对简单。你自己试过吗？
还没有。我希望有一个好的，经过测试的插件。如果没有我想我会写一个。
您可以检查用户是否使用“User-Agent”（php ex: $_SERVER['HTTP_USER_AGENT']）通过手机访问网站，如果是，请添加jquerymobile
感谢所有反馈。我想我会先看看 jQuery 1.4 的 longclick 插件，看看我是否让它在 jQuery 1.8 中工作。

标签： javascript jquery onclick touchscreen

【解决方案1】：

事实证明，您可以将现有的 longclick plugin 用于 jQuery 1.4 和 jQuery 1.8。

$("#area").mousedown(function(){
    $("#result").html("Waiting for it...");
});
$("#area").longclick(500, function(){
    $("#result").html("You longclicked. Nice!");
});
$("#area").click(function(){
    $("#result").html("You clicked. Bummer.");
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://rawgit.com/pisi/Longclick/master/jquery.longclick-min.js"></script>
    
<p id="area">Click me!</p>
<p id="result">You didn't click yet.</p>

【讨论】：

【解决方案2】：

您可以做的就是在各种鼠标事件期间对setTimeout 使用延迟检查。结合 jQuery 的 $.data() 来存储跨事件（在每个元素上）的超时应该可以帮助您完成这一切。这是一个例子：

HTML：

<ul id="menu">
    <li><a href="#" onclick="return false;" class="test"></a></li>
    <li><a href="#" onclick="return false;" class="test"></a></li>
</ul>

JS：

var mousepress_time = 1000;  // Maybe hardcode this value in setTimeout
var orig_message = "Click Here";  // Remove this line
var held_message = "Down";  // Remove this line

$(document).ready(function () {
    $(".test")
        .html(orig_message)  // Remove this line
        .on("mousedown", function () {
            console.log("#########mousedown");  // Remove this line
            var $this = $(this);
            $(this).data("checkdown", setTimeout(function () {
                // Add your code to run
                $this.html(held_message);  // Remove this line
            }, mousepress_time));
        }).on("mouseup", function () {
            clearTimeout($(this).data("checkdown"));
            console.log("#######mouseup");  // Remove this line
            $(this).html(orig_message);  // Remove this line
        }).on("mouseout", function () {
            clearTimeout($(this).data("checkdown"));
            console.log("#######mouseout");  // Remove this line
            $(this).html(orig_message);  // Remove this line
        });
});

演示：http://jsfiddle.net/7jKYa/10/

这还有很多事情要做，因为您还加入了悬停，但在大多数情况下，我认为这可以满足您的需求。

如有必要，它可以很容易地转换为插件，否则我认为它可以单独工作。我希望这会有所帮助！

【讨论】：

【解决方案3】：

你可以计时。

function onImageMouseDown(e){
    var d = new Date();
    md_time = d.getTime(); // Milliseconds since 1 Apr 1970
}

function onImageMouseUp(e){
    var d = new Date();
    var long_click = (d.getTime()-md_time)>1000;
    if (long_click){
        // Click lasted longer than 1s (1000ms)
    }else{
        // Click lasted less than 1s
    }
    md_time = 0;
}

【讨论】：