禁用點擊懸停

Question

我有一個jQuery遊戲，我的會員一直在尋找贏得的方法。這裏是數字遊戲link text。

我已經制作了遊戲，所以你不能在Firefox上播放它，不知道其他瀏覽器是否有與Firefox一樣的作弊工具。

我遇到的第一個問題是遊戲玩家將鼠標放在一個框上，直到他們的數字出現，然後他們點擊它。爲了解決這個問題（在stackoverflow上有一個天才的幫助），我們做了它，所以你不能連續兩次點擊同一個盒子。 但現在它是同樣的問題，他們會移動到另一個盒子，並保持他們的鼠標，直到他們看到他們的號碼。所以現在我需要做到這一點，如果他們超過一個盒子超過x秒的時間，他們將無法點擊該盒子。

倒數計時器可能只是做的伎倆，並消除懸停腳本。請幫助你做到哪一個。這是腳本。

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

你可以很容易地記得他們盯着盤旋時。使用含ID爲「容器」的量程簡化的例子跨越用戶會點擊：

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

或者你可以做更復雜（但積極的）東西用定時器

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

但同樣，正如我在我的評論說，你不能相信任何客戶端爲這類事情發送給你的數據，有太多的工具用於調試Web應用程序（這是一件好事！）或者完全僞造HTTP消息。在你的情況下，我不認爲這是可能的區分天賦的球員和天賦的faker（你可能從數據中找出來的可能是笨蛋）。