Question

我正在尝试阻止菜单中的默认链接点击操作。我使用下面的代码，但是，我注意到当我点击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);

我想做的是：

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

Answer 1

喜欢这个Example

$(document).ready(function(){

  var lastClicked;

  $(".menu a").on("touchstart click", function(e){

    if(lastClicked!==$(this).attr('href')){
      e.preventDefault();
      lastClicked=$(this).attr('href');

     }


  });
});

Answer 2

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

意识形态示例：

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

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

2 个答案: