Отключить щелчок и включить двойной щелчок на мобильном телефоне

Question

У меня есть выпадающее меню:

<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>

Проблема в том, что на мобильном телефоне вы не можете увидеть причину подменю, когда вы нажимаете на нее, перенаправляет вас мгновенно.

Так что я хотел бытриггер при наведении на нажатие и триггер для перенаправления при двойном нажатии на мобильных устройствах.

Я пробовал это:

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

Но теперь функция protectDefault () переопределяет функцию doubletap.

Мне нужна помощь, нет темы, которая могла бы мне помочь

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>

Answer 1

Этот код работает.Спасибо всем

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

Answer 2

На самом деле вы используете неправильный путь.Прежде всего, вы должны вызвать эту функцию по нажатию, затем вы можете проверить ширину устройства.проверь мой код.Надеюсь, этот код работает для вас.Спасибо.

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

Answer 3

Вы можете попробовать эту комбинацию тайм-аута

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>