防止默认，直到连续两次单击

Preventdefault until two successive clicks

本文关键字：两次 单击 连续 默认      更新时间：2023-09-26

我正在尝试阻止菜单中的默认链接单击操作。我让它使用以下代码，但是，我注意到当我单击Link 1然后Link 5然后返回Link 1时，会发生默认操作。 

<ul class="menu">
    <li><a href="page1.html">Link 1</a>
        <ul>
           <li><a href="page2.html">Link 2</a></li>
           <li><a href="page3.html">Link 3</a></li>
           <li><a href="page4.html">Link 4</a></li>
        </ul>
    </li>
    <li><a href="page5.html">Link 5</a></li>
</ul>


.JS：

$(".menu a").one("touchstart, click", false);

我想做的是这样的：

  1. 阻止首次单击元素时执行默认操作
  2. 如果单击了另一个菜单项元素，请重置第一个元素的.one()，因此当再次单击它时，默认操作不会立即发生，直到进行第二次连续单击。

像这个例子

$(document).ready(function(){
  var lastClicked;
  $(".menu a").on("touchstart click", function(e){
    if(lastClicked!==$(this).attr('href')){
      e.preventDefault();
      lastClicked=$(this).attr('href');
     }

  });
});

使用数据属性来设置临时值。

示例意识形态： 

<a href="page1.html" data-proceed="false">Link 1</a>
<a href="page2.html" data-proceed="false">Link 2</a>
$('a').click(function(e) {
    $('a').not(this).attr('data-proceed', 'false'); // reset to false for all other links. Use classes as per your requirement
    if($(this).attr('data-proceed')==='false')
    {
        e.preventDefault(); // if this is the first time
        $(this).attr('data-proceed', 'true'); // so that from the next click it will proceed
    }
});
相关文章：