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

Solution 1:

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

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

Solution 2:

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:

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

JS:

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

$(document).ready(function () {
    $(".test")
        .html(orig_message)  // Remove this line
        .on("mousedown", function () {
            console.log("#########mousedown");  // Remove this linevar $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!

Solution 3:

You could time it.

functiononImageMouseDown(e){
    var d = newDate();
    md_time = d.getTime(); // Milliseconds since 1 Apr 1970
}

functiononImageMouseUp(e){
    var d = newDate();
    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;
}