Question

对不起这个新手问题，请耐心等待我;）我还在学习JavaScript / jQuery。

我的目标是确保用户只点击一次图片按钮（以避免因重复表单提交而出现重复值）。

以下是我要做的方法：

由于按钮是图像，我不能在第一次按钮点击后禁用它。我可以隐藏图像按钮，但我认为这不是一个好主意，因为用户可能想知道按钮发生了什么。所以我想我可以在JavaScript中创建一个全局变量来跟踪用户点击重复浏览器标签按钮的次数。

这是我的示例代码：

HTML

<html>
     <head><title>Global Variable Test 1</title></head>
     <body>
           <script type="text/javascript" src="clickCount.js"></script>
           <a href="#" onClick="countClicks();"><img src="arrow.gif" /></a>
     </body>
</html>

的JavaScript

<!-- hide script from old browsers
  var counter = 0;
  function countClicks() {
        counter++;
        if(counter > 1)
       alert("Waah, stop clicking!");
        else
       alert('Number of clicks:' + counter);
  }
// end hiding script from old browsers -->

好吧，我能够计算一个页面上的点击次数，但如果我在同一页面上打开两个标签，我似乎无法在下一页“共享”我的变量（即当我点击时选项卡1上的图像按钮再次在选项卡二中单击它，点击计数应为2而不是一个）。所以我的问题是：如何在JavaScript中创建一个可以跨浏览器标签共享的全局变量？有没有更好的方法来确保用户只能点击一次图像按钮？

非常感谢任何帮助。

TIA。

Answer 1

我的目标是确保用户只点击一次图片按钮（以避免因重复表单提交而出现重复值）。

使用以下声明：

    $('#mybuttonid').one("click", function() {
      //my action on click here
    });

它只会触发一次点击事件

如何在JavaScript中创建可以跨浏览器标签共享的全局变量？

你做不到。你可以改用cookies。

Answer 2

我认为更好的策略是禁用IMO图像按钮。您可以使出现被禁用（淡出，无响应）但实际上不会将其删除 - 即将其淡化并忽略后续点击。

示例：

$('#yourButton').click(function(e){
    $(this).fadeTo(0.5);
    $.get("someURL", {buttonClick:1});
    $(this).unbind().bind('click', function(e){
        e.preventDefault();  
    });
});

编辑：要创建全局var，AFAIK，您不能跨浏览器选项卡执行此操作 - 而应将其存储在会话中。您可以使用一些PHP或其他任何操作，并在单击按钮时使用AJAX查询它（请参阅修订示例）。

JavaScript / jQuery跟踪图像按钮单击次数

2 个答案: