disable click on hover

Question

I have a jquery game that my members keep finding ways to win. It's the numbers game here link text.

I've made the game so you can't play it on firefox, don't know if other browsers have the same cheat tools as firefox.

1st problem I had was gamers would just keep their mouse over one box till their number showed up then they'd click it. To fix that (with some help from a genius on stackoverflow) we made it so you can't click the same box twice in a row. But now it's the same problem, they'll just move to another box and keep their mouse their till they see their number. So now I need to make it so if they over over a box for more than x number of seconds they won't be able to click on that box.

A count down timer may just do the trick though and eliminate the hover script. Please help with which ever one you can. Here's the script.

    var hitCount = 0,
missCount = 0;

function IsNumeric(n) {
return !isNaN(n);
}

$("#getit").click(function() {
var hitCount = 0,
missCount = 0;
$('#misscount').text(0);
$('#hitcount').text(0);
$('#message').hide(100);        
$('#randomnumber').empty();
$('#randomnumber').show(300);       
var li = [],
    intervals = 0,
    n = parseInt($('#MyNumber').val());

if (IsNumeric(n)) {
   intervalId= setInterval(function() {
        li[intervals++ % li.length].text(Math.random() > .1 ? Math.floor(Math.random() * (10 + n) + (n / 2)) : n).attr('class', '')    ;
    }, <?php echo $time ?>);
}

$('#randomnumber').empty();

for (var i = 0; i < 7; i++) {
    li.push($('<li />').one('click', function() {
        BoxClick.call(this, n);
    }).appendTo('#randomnumber'));
}


function BoxClick(n) {
var $this = $(this);
$('#randomnumber li').unbind().one('click', function() {
        BoxClick.call(this,n);
});
$this.unbind();

if (!$this.hasClass('clicked')) {
    if (parseInt($this.text(), 10) === n) {
        $this.addClass('correct');
        $('#hitcount').text(++hitCount);
    } else {
        $this.addClass('wrong');
        $('#misscount').text(++missCount);
    }
}
            if(missCount==<?php echo $limit ?>){
               clearInterval(intervalId);
               $('#randomnumber').hide(300);

                $.ajax({
type : 'POST',
url : 'FBhighscore_hwnd.php',
dataType : 'json',
data: {
tgameid: $('#tgameid').val(),MyNumber: $('#MyNumber').val(),totalHits: hitCount
},
success : function(data){
$('#waiting').hide(500);
$('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
.text(data.msg).show(500);
if (data.error === true)
$('#loginForm').show(500);
else
$('#send').hide(500);       
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
$('#waiting').hide(500);
$('#message').removeClass().addClass('error')
.text('There was an error.').show(500);
$('#loginForm').show(500);
}
});

            }


$this.addClass('clicked');
}
return false;
});

Answer 1

You can easily remember when they stared hovering. Using a simplified example of a span with the ID "container" containing spans the user would click on:

jQuery(function($) {

  var container, n;
  var HOVER_THRESHOLD = 1000; // Milliseconds

  // Build the grid
  container = $('#container');
  for (n = 0; n < 16; ++n) {
    $("<span>0</span>").appendTo(container).data("hoverStart", 0);
  }

  // Watch for hovers and clicks on the elements
  container.find('span')
    .hover(startHover, stopHover)
    .click(handleClick);

  // At hover start, remember when we started
  function startHover() {
    $(this).data("hoverStart", new Date().getTime());
  }

  // At hover end, clear the hover thingy
  function stopHover() {
    $(this).data("hoverStart", 0);
  }

  // On click, check how long they've been hovering
  function handleClick() {
    var $this, startHover;

    $this = $(this);
    startHover = $this.data("hoverStart");

    // Hovering too long?
    if (startHover != 0
        && (new Date().getTime() - startHover) > HOVER_THRESHOLD) {
      // Yes
      $this.css("color", "red");
      setTimeout(function() {
        $this.css("color", "");
      }, 500);
    }
    else {
      // No, allow click
      $this.html(parseInt($this.html(), 10) + 1);
    }
  }
});​

Live example

Or you can do the more complex (but proactive) thing with timers:

jQuery(function($) {

  var container, n;
  var HOVER_THRESHOLD = 1000; // Milliseconds

  // Build the grid
  container = $('#container');
  for (n = 0; n < 16; ++n) {
    $("<span>0</span>").appendTo(container).data("hoverTimer", 0);
  }

  // Watch for hovers and clicks on the elements
  container.find('span')
    .hover(startHover, stopHover)
    .click(handleClick);

  // At hover start, start a timer
  function startHover() {
    var $this = $(this);
    $this.data("hoverTimer", setTimeout(function() {
      $this.addClass("disabled");
    }, HOVER_THRESHOLD));
  }

  // At hover end, clear the timer
  function stopHover() {
    var $this, timer;

    $this = $(this);
    $this.removeClass("disabled"); // May or may not have it
    timer = $this.data("hoverTimer");
    if (timer != 0) {
      clearTimeout(timer);
      $this.data("hoverTimer", 0);
    }
  }

  // On click, check how long they've been hovering
  function handleClick() {
    var $this;

    $this = $(this);

    // Hovering too long?
    if ($this.hasClass("disabled")) {
      // Yes, disallow the click
    }
    else {
      // No, allow click
      $this.html(parseInt($this.html(), 10) + 1);
      // If you want to reset the hover timer on click:
      stopHover.call(this);
      startHover.call(this);
    }
  }
});​

Live example

But again, as I said in my comment, you can't trust any data sent to you by the client for this sort of thing, there are too many tools for debugging web applications (which is a great thing!) or just completely faking HTTP messages. In your case, I don't think it's possible to differentiate a gifted player from a gifted faker (ham-handed fakers you can probably figure out from the data).