Question

我在锚标签上面临同时多次击中的问题。我有页面abc.html 它有一个锚标记。当用户点击该链接时，它会处理一个订单请求。现在，如果用户多次点击该链接，我将遇到什么问题，然后我收到重复的订单。所以我决定仅限一次点击锚标记。我做了一些R＆amp; D我发现了一个代码，但它是第一次点击时的disbale链接，而我想在第二次点击时禁用它。代码如下

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            a.disabled:link, a.disabled:visited { color: grey; }
        </style>
        <script>
            $(#document).ready(function(){
    $("#disabled a").click(function () {
      $(this).fadeTo("fast", .5).removeAttr("href");
    });
  });
        </script>
    </head>
    <body>
        <a href="http://google.com" onclick="this.removeAttribute('href');this.className='disabled'">Link</a>
    </body>
</html>

Answer 1

您可以使用one：

$("#disabled a").one('click',function () {
    //to do here
});

示例示例：

$(function() {
  $('#link').one('click', function() {
    console.log('in here ...');
    $(this).removeAttr('href');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a target="_blank" href="http://www.w3schools.com" id='link'>W3 Schools</a>

Answer 2

您可以使用（已编辑的代码）：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>
            $(document).ready(function(){
                var isLinkActive = true;

                $("#link").click(function (event) {
                    if (isLinkActive) {
                        isLinkActive = false;
                    } else {
                        window.location.hash = '';
                        event.preventDefault();
                    }
                });
            });
        </script>
    </head>
    <body>
        <a href="#test" id='link'>Link</a>
    </body>
</html>

但是我不建议依赖它来防止链接的双重使用（例如用户可以使用desactive javascript）。您应该在服务器端检查它。一种方法是在服务器端构建令牌并将其作为隐藏字段传递。然后，当用户提交时，再次检查服务器端的令牌。这样可以同时防止CSRF攻击。

另一方面，修改服务器状态的请求（在您的情况下创建订单）不应该是链接（HTTP GET方法）。这应该是POST HTTP请求。使用提交按钮和表单（这将允许您执行我之前说过的操作）。

限制用户仅单击一次标记

2 个答案: