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

Question

Sorry for a this newbie question, so please be patient with me ;) I am still studying JavaScript/jQuery. 对不起，这个新手问题，所以请耐心;）我仍在学习JavaScript / jQuery。

My goal is to ensure that the user will click the image button only once (to avoid having duplicate values due to duplicate form submit). 我的目标是确保用户仅单击一次图像按钮（以避免由于提交重复的表单而产生重复的值）。

Here's the approach that I'm going to do: 这是我要执行的方法：

Since the button is an image, I could not just disable it after first button click. 由于按钮是图像，因此我不能仅在单击按钮后禁用它。 I could hide the image button but I don't think that's a good idea because the user might wonder what happened to the button. 我可以隐藏图像按钮，但是我认为这不是一个好主意，因为用户可能想知道按钮发生了什么。 So I thought I could just create a global variable in JavaScript to keep track how many times the user clicked the button across duplicate browser tabs . 所以我想我可以在JavaScript中创建一个全局变量，以跟踪用户在重复的浏览器选项卡上单击按钮的次数。

Here's my sample code: 这是我的示例代码：

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

Well, I was able to count the number of clicks on one page but if I have two tabs open both on the same page, I can't seem to "share" my variable on the next page (ie When I click the image button on tab one and click it again in tab two, the click count should be 2 not one). 好吧，我能够计算出一页上的点击次数，但是如果我在同一页面上同时打开两个选项卡，则似乎无法在下一页上“共享”我的变量（即，当我单击图像按钮时）在选项卡一上单击并再次在选项卡二中单击它，则点击计数应为2，而不是1）。 So my question is: How could I create a global variable in JavaScript that could be shared across browser tabs ? 所以我的问题是：如何在JavaScript中创建可以在浏览器选项卡之间共享的全局变量？ Is there a better way to ensure that users can only click the image button once? 有没有更好的方法来确保用户只能单击一次图像按钮？

Any help would be very much appreciated. 任何帮助将不胜感激。

TIA. TIA。

Answer 1

My goal is to ensure that the user will click the image button only once (to avoid having duplicate values due to duplicate form submit). 我的目标是确保用户仅单击一次图像按钮（以避免由于提交重复的表单而产生重复的值）。

use the following statement: 使用以下语句：

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

it will fires the click event only once 只会触发一次click事件

How could I create a global variable in JavaScript that could be shared across browser tabs? 如何在JavaScript中创建可在浏览器标签之间共享的全局变量？

You can't. 你不能 You can use cookies instead. 您可以改用cookie。

Answer 2

I think a better strategy would be to disable the image button, IMO. 我认为更好的策略是禁用IMO按钮。 You can make it appear to be disabled (faded out, nonresponsive) but not actually remove it - ie fade it out a little and ignore subsequent clicks. 您可以使它似乎已被禁用（淡出，无响应），但实际上并未将其删除-即稍微淡出它并忽略随后的点击。

Example: 例：

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

EDIT: To create the global var, AFAIK you can't do this across browser tabs - rather, you should store that in the session. 编辑：要创建全局变量AFAIK，您不能跨浏览器标签执行此操作-而是应将其存储在会话中。 You could use a bit of PHP or whatever to do this, and query it using AJAX when the button is clicked (see revised example). 您可以使用一点PHP或其他方法来执行此操作，并在单击按钮时使用AJAX对其进行查询（请参见修订后的示例）。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2011-09-21 08:05:34

解决方案2
0 2011-09-21 08:07:22

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2011-09-21 08:05:34

解决方案2 0 2011-09-21 08:07:22

解决方案1
3 已采纳 2011-09-21 08:05:34

解决方案2
0 2011-09-21 08:07:22