Click function working, but DoubleClick function not working - jQuery

Question

I am trying to have menu items click to open sub items and then double click to follow through to the link. Have tried a variety of different approaches but for some reason nothing's happening when double clicked.

 $( ".site-head .section-menu .mobile-sub-menu ul li .first-a" ).on('click', function(event) {
        $( ".sub-items" ).addClass('hiddenMenu');     
        $(this).parent().find('.sub-items').removeClass('hiddenMenu');
        event.preventDefault();
    }); 


    $(document).on('dblclick', '.first-a', function() {
        console.log("event fired");
        window.location.replace($(this).attr("href"));

    });

Any suggestions on what I'm doing wrong?

Edit: the standard solution that has been suggested doesn't work in this situation. The double click should direct to link and the first should prevent going to the link and execute some other function...

Have you looked at your console? The event is being triggered, but your call to window.location.replace() might have a problem. — KyleS, Jun 24 '17 at 14:38
This isn't related to an answer, but related to the fact this sounds like utterly horrible UI to me. — Rick Calder, Jun 24 '17 at 14:39
@KyleSposatoNothing is happening in the console unfortunately — dreamkiller, Jun 24 '17 at 14:43
Mixing "click" and "double-click" in a web application is doomed to failure and terrible for usability anyway. — Pointy, Jun 24 '17 at 14:48
Possible duplicate of [Jquery bind double click and single click separately](https://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately) — OneNeptune, Jun 24 '17 at 14:48
Why can't you try dblclick event to that id or class instead of using $(document) — Hema Nandagopal, Jun 24 '17 at 14:48

score 0 · Answer 1 · answered Jun 24 '17 at 14:35

0

When you make the first click, don't immediately call the method, instead set a timer that calls the original callback function in say ~0.75 seconds UNLESS you receive a second click. You're firing off an event and handling the first click, so when the second click comes through - it's a single click, not a 'dblclick'

answered Jun 24 '17 at 14:35

OneNeptune

883
11
20

1

@dreamkiller this is the standard solution for this problem, please read here for more: https://stackoverflow.com/questions/6330431/jquery-bind-double-click-and-single-click-separately/7845282#7845282 – OneNeptune Jun 24 '17 at 14:48
that solution doesn't help because I'm trying to follow through to the link on the double click. Thank you though – dreamkiller Jun 24 '17 at 15:06

score 0 · Answer 2 · answered Jun 24 '17 at 14:53

I hope this will help You..

HTML Part

<p ondblclick="myFunction()">Double-click this paragraph to trigger a function.</p>

<p id="demo"></p>

JQuery Part

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>

Swoop · Answer 3 · 2017-06-24T19:14:04.380

0

It is not recommended to bind both click and doubleclick events to the same element, but if you must do so, this previously accepted answer provides a perfect solution by using a counter to track # of clicks: Jquery bind double click and single click separately

edited Jun 24 '17 at 19:14

answered Jun 24 '17 at 15:12

Swoop

16
4

Click function working, but DoubleClick function not working - jQuery

3 Answers3