2012-10-15 40 views
2

我爲小學生製作了拼寫遊戲。我想在我的遊戲觸控事件中進行點擊事件,以便在平板電腦上兼容。有沒有一種方法可以將它們與我的點擊事件放在一起,以便一個程序與兩個程序兼容,或者我將不得不製作平板電腦版本?在平板電腦上運行時將點擊事件變爲觸摸事件

在這裏,我有我的點擊事件之一的代碼爲例

$('.drag').on('click', function(e) { 
e.preventDefault(); 
if (animation) return; 
animation = true; 
setTimeout(function() { 
    animation = false; 
}, 700); 
$(".minibutton").css('visibility', 'hidden'); 
$('.next').css('visibility', 'hidden'); 

var target = $('.drop-box.spellword:not(.occupied):first'); 
var targetPos = target.position(); 
var currentPos = $(this).offset(); 
var b = $(this); 

if (target.length) { 
    target.addClass("occupied"); 
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({ 
     background: "transparent", 
     position: "absolute", 
     top: currentPos.top, 
     left: currentPos.left 
    }).animate({ 
     top: targetPos.top, 
     left: targetPos.left 
    }, "slow", function() { 
     $(this).css({ 
      top: 0, 
      left: 0 
     }).appendTo(target); 

     var spellWord = $('.drop-box.spellword'); 
     if (!spellWord.filter(':not(.occupied)').length) { 
      var wordIsCorrect = 0; 
      spellWord.each(function() { 
       if ($(this).data("letter") == $(this).find("div").data("letter")) { 
        wordIsCorrect++; 
       } 
      }); 

      if (spellWord.length == wordIsCorrect) { 

       spellWord.addClass('wordglow2'); 
       $(right).val('Right!'); 
       $(right).show(); 
       success.play(); 
       $(wrong).hide(); 
       score.right++; 
       score.attempts++; 

       if (score.right == 3) { 

        $('.answers').css('visibility', 'visible'); 
        $('.answers').html("Well done! </br> You correctly spelt " + score.right + ". </br> Keep it up.").show(); 
        $('table').fadeOut(3000); 
        $('.right').hide(); 
        $('.box-style2').hide(); 
        $('.box-style').hide(); 
        $('.picstyle').hide(); 
        $('.play').hide(); 
        $('.minibutton2').hide(); 
        $("#mysoundclip").attr('src', listOfWords[rndWord].audio); 
        audio.stop(); 
        $("#mypic").attr('src', listOfWords[rndWord].pic); 
        pic.hide(); 

       } 

       setTimeout(function() { 
        jQuery('.minibutton').trigger('click'); 
       }, 1500); 

       setTimeout(function() { 
        jQuery(right).hide(); 
       }, 1500); 

      } else { 

       //spellWord.addClass("wordglow4").css('color', 'transparent'); 
       $(wrong).val('Wrong!'); 
       $(wrong).show(); 
       failure.play(); 
       $(right).hide(); 
       score.wrong++; 
       score.attempts++; 

       if (score.wrong == 3) { 

        $(".minibutton").css('visibility', 'visible'); 
        $('.next').css('visibility', 'visible'); 

       } 

       $('.drop-box.spellword').animate({ 
        'opacity': 1 
       }, 1500, function() { 
        $(this).removeClass('wordglow4').removeClass('occupied').html('') 
       }); 

       setTimeout(function() { 
        jQuery(wrong).hide(); 
       }, 1500); 


      } 
     } 
    }); 

} 

}); 

有人點我在正確的方向,因爲我從來沒有這樣做過。

這裏是一個小提琴幫助(聲音警告!!)http://jsfiddle.net/smilburn/7Y7A5/8/

+0

你應該試試這個插件:http://touchpunch.furf.com/ – sdespont

+0

點擊屏幕時會觸發點擊事件。 –

+0

謝謝,只是看看。你知道是否與所有瀏覽器兼容?另外當它說在第一步使用之前把它放在第二步。如何添加它,因爲它是src @Bouillou – sMilbz

回答

0

你可以在你的手機版本添加自來水事件,包括jQuery Mobile的。

$('.drag').on('click tap', function(e) {...}