Disable click and enable double click on mobile

Question

I have a menu dropdown:

<ul class="navbar">
  <li>
    <a href="">Link</a>
    <ul>
      <li>
        <a href="">Link 2</a>
        <ul>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

The problem is that on mobile, you cannot see submenu cause of when you click it redirects you instantly.

So I'd like trigger hover on tap and trigger to redirect on double tap on mobile devices.

I've tryed this:

if ($(window).width() < 768) {
  $(".navbar a").on('doubletap', function () {
    window.location = this.href;
    console.log('d');
  });
  $(".navbar a").on('click', function (e) {
    e.preventDefault();
  });
}

But now the preventDefault() function override the doubletap function.

I need some help, there is no topic that could help me

body {
  margin:0;
  padding:0;
}
.navbar, .navbar ul {
    background:#2D7D9A;
    list-style: none;
    height:50px;
    margin:0;padding:0;
    z-index:2;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navbar li {
    height:50px;
    float:left;
    line-height:50px;
    padding:0 10px;
}
.navbar li ul {
    background:#0099BC;
    position:absolute;
    margin:0;
    padding:0;
    left:0;
    width:100%;
    display:none;
}
.navbar li ul li {
    display:inline;
}
.navbar li ul li ul {
    background:#038387;
    width:100%;
    /* left:5%; */
    top:45px;
}
.navbar li a {
    color:#bfffff;
    text-decoration:none;
}
.navbar li a:hover {
    color:white;
    text-shadow:1px 1px 10px #bfffff;
}
.navbar li:hover > ul {
    display:block;
}
.navbar li ul li:hover > ul {
    display:block;
}

<ul class="navbar">
  <li>
    <a href="">Link</a>
    <ul>
      <li>
        <a href="">Link 2</a>
        <ul>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Almost! On desktop it works but on mobile not. If I double click it zoom/unzoom but it never trigger the link. — Julia Ropoulos, Oct 25 '18 at 11:25
Maybe this helps you. https://stackoverflow.com/questions/8825144/detect-double-tap-on-ipad-or-iphone-screen-using-javascript — Wimanicesir, Oct 25 '18 at 11:37

score 1 · Answer 1 · answered Oct 25 '18 at 11:37

You can try this combination of timedout

if ($(window).width() < 768) {
var DELAY = 700, clicks = 0, timer = null;
$(".navbar a").on("click", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {
        e.preventDefault();

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter
        
            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            alert("Double Click");  //perform double-click action
            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        window.location = this.href;
    });
}

body {
  margin:0;
  padding:0;
}
.navbar, .navbar ul {
    background:#2D7D9A;
    list-style: none;
    height:50px;
    margin:0;padding:0;
    z-index:2;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.navbar li {
    height:50px;
    float:left;
    line-height:50px;
    padding:0 10px;
}
.navbar li ul {
    background:#0099BC;
    position:absolute;
    margin:0;
    padding:0;
    left:0;
    width:100%;
    display:none;
}
.navbar li ul li {
    display:inline;
}
.navbar li ul li ul {
    background:#038387;
    width:100%;
    /* left:5%; */
    top:45px;
}
.navbar li a {
    color:#bfffff;
    text-decoration:none;
}
.navbar li a:hover {
    color:white;
    text-shadow:1px 1px 10px #bfffff;
}
.navbar li:hover > ul {
    display:block;
}
.navbar li ul li:hover > ul {
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar">
  <li>
    <a href="">Link</a>
    <ul>
      <li>
        <a href="">Link 2</a>
        <ul>
          <li><a href="">Link 3</a></li>
          <li><a href="">Link 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

score 1 · Answer 2 · answered Oct 25 '18 at 11:49

1

Actually you are using the wrong way. first of all, you have to call this function on click then you can check the device width. check it out my code. Hope this code work for you. Thank You.

$(document).ready(function(){

    $(".navbar a").click(function (e) {
        e.preventDefault();
        if ($(window).width() < 768) {
            $(this).dblclick(function (e) {
                window.location = this.href;
            });
        }
        else{
            window.location = this.href;
        }
    });
});

answered Oct 25 '18 at 11:49

Videsh Chauhan

365
2
16

It work! I'm not expert but my code is shorter. If someone can confirm that this code is better OK :) Thanks – Julia Ropoulos Oct 25 '18 at 11:51
@JuliaRopoulos I just showing you how you can use dblclick() function of jquery instead of using click function multiple times and I think it's better shorter code than yours. – Videsh Chauhan Oct 25 '18 at 11:56

score 0 · Answer 3 · answered Oct 25 '18 at 11:38

0

This code works. Thanks everybody

if ($(window).width() < 768) {
  $(".navbar a").on('click', function (e) {
    e.preventDefault();
    $(this).on('click', function (e) {
      window.location = this.href;
    });
  });
}

answered Oct 25 '18 at 11:38

Julia Ropoulos

23
6

this wont work properly, try clicking the "link" and hold for 1 second then click again "link". this will generate a double click and the page will redirect which is a wrong thing. So single click will convert to double click on click on it for two times – charan kumar Oct 25 '18 at 12:09

Disable click and enable double click on mobile

3 Answers3