Javascript 在平板电脑上运行时将点击事件转换为触摸事件

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

这里我有一个click事件的代码作为示例

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


            }
        }
    });

}

});

$（'.drag'）。在（'click'，函数（e）上{
e、 预防默认值（）；
如果（动画）返回；
动画=真；
setTimeout（函数（）{
动画=假；
}, 700);
$（“.minibutton”）.css（‘可见性’、‘隐藏’）；
$（'.next'）.css（'visibility'，'hidden'）；
var target=$（'.drop box.spellword:not（.occumbered）：first'）；
var targetPos=target.position（）；
var currentPos=$（this.offset（）；
var b=$（本）；
if（目标长度）{
target.addClass（“已占用”）；
b、 clone（）.addClass(
b、 数据（“字母”）==target.data（“字母”）？“wordglow3”：“wordglow3”）.appendTo（“table”）.css({
背景：“透明”，
位置：“绝对”，
顶部：当前位置顶部，
左：当前位置左
}).制作动画({
顶部：targetPos.top，
左：targetPos.left
}，“慢”，函数（）{
$（this.css）({
排名：0，
左：0
}).附于（目标）；
var spellWord=$（'.drop-box.spellWord'）；
if（！spellWord.filter（':not（.occupated））.length）{
var-wordIsCorrect=0；
拼写单词。每个（函数（）{
if（$（this.data（“字母”）==$（this.find（“div”）.data（“字母”））{
wordIsCorrect++；
}
});
if（spellWord.length==wordIsCorrect）{
spellWord.addClass（'wordglow2'）；
$（右）.val（'right！'）；
$（右）；
成功。玩（）；
$（错误）。隐藏（）；
分数。右++；
分数.尝试次数++；
如果（分数.右==3）{
$（'.answers'）.css（'visibility'，'visible'）；
$（'.answers'）.html（“做得好！
您正确地拼写了“+score.right+”
继续保持下去。”）.show（）；
美元（‘表’）。淡出（3000）；
$（'.right'）.hide（）；
$（'.box-style2'）.hide（）；
$（'.box style'）.hide（）；
$（'.picstyle'）.hide（）；
$（'.play'）.hide（）；
$（'.minibutn2'）.hide（）；
$（“#mysoundclip”）.attr（'src'，listOfWords[rndWord].audio）；
audio.stop（）；
$（“#mypic”）.attr（'src'，listOfWords[rndWord].pic）；
pic.hide（）；
}
setTimeout（函数（）{
jQuery（'.minibutton'）。触发器（'click'）；
}, 1500);
setTimeout（函数（）{
jQuery（右）.hide（）；
}, 1500);
}否则{
//spellWord.addClass（“wordglow4”）.css（'color'，'transparent'）；
$（错误）.val（'错误！'）；
$（错误）。show（）；
失败。玩（）；
$（右）。隐藏（）；
分数。错误++；
分数.尝试次数++；
如果（分数错误==3）{
$（“.minibutton”）.css（‘可见性’、‘可见’）；
$（'.next'）.css（'visibility'，'visible'）；
}
$（'.drop-box.spellword'）。设置动画({
“不透明度”：1
}，1500，函数（）{
$（this.removeClass（'wordglow4'）。removeClass（'occulated'）。html（“”）
});
setTimeout（函数（）{
jQuery（错误）.hide（）；
}, 1500);
}
}
});
}
});

有人能给我指出正确的方向吗？因为我从来没有这样做过

---

这里有一个帮助提示（声音警告！！）

您可以添加点击事件，并在您的手机版本中包含jQuery Mobile

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

---

您可以添加tap事件，并在移动版本中包含jQuery Mobile

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

---

你应该试试这个插件：点击屏幕时会触发点击事件。谢谢你刚才看了一下。您知道是否与所有浏览器兼容吗？还有，当它说在第二步第一次使用之前把这个放进去。我如何添加它，因为它是src@BouillouYou应该尝试这个插件：点击屏幕时触发点击事件。谢谢刚刚看了一下。您知道是否与所有浏览器兼容吗？还有，当它说在第二步第一次使用之前把这个放进去。我如何添加它，因为它是src@Bouillou