Question

我为小学生做了拼写游戏。我想在我的游戏触摸事件中制作点击事件，以便它可以在平板电脑上兼容。有没有办法可以将它们与我的点击事件放在一起，以便一个程序兼容两者，或者我必须制作一个平板电脑版本？

这里我将我的一个点击事件的代码作为示例

$('.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/

Answer 1

您可以添加点击事件，并在您的移动版本中加入jQuery Mobile。

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

在平板电脑上运行时将点击事件设置为触摸事件

1 个答案: