Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Longpress / longclick event support / plugin in jQuery

I'm working on a website which requires mouseover menu's. I would not recommend mouseover menu's from an accessibility point of view, but it's pretty easy to implement using jQuery.

The problem: we also need to support touchscreen devices (tablets). On such a device you don't have a mouse and, so the mouseover event is not working. I was hoping for jQuery to have a longpress event, but it doesn't. I did find a jQuery longclick plugin using Google, but it was for jQuery 1.4, so I'm not keen on using that. Also the jQuery plugin site is under maintenance at the moment, so that is not very helpful.

So the question: is there an elegant plugin for jQuery 1.7 / 1.8 to support longpress / longclick events?

like image 625
Jasper de Vries Avatar asked Aug 27 '12 14:08

Jasper de Vries


2 Answers

It turns out that you can just use the existing longclick plugin for jQuery 1.4 with 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>
like image 99
Jasper de Vries Avatar answered Oct 17 '22 22:10

Jasper de Vries


Something you could do is use delayed checks with setTimeout during the various mouse events. Incorporating jQuery's $.data() to store the timeout across events (on each element) should help you accomplish it all. Here's an example:

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

DEMO: http://jsfiddle.net/7jKYa/10/

There's a lot more to do with this, since you're also incorporating hovering, but for the most part, I think this does what you want.

It could easily be converted to a plugin if necessary, otherwise I think it could work fine alone. I hope this helps though!

like image 38
Ian Avatar answered Oct 17 '22 22:10

Ian