jquery - "Hover"在 iPad 上播放音乐

Question

我正在设计一个包含多个图 block 的网页。在桌面上，悬停每个图 block 将触发 jPlayer 开始播放音乐预览，执行此操作的代码(使用 jQuery)是:

function init_tile(id, url) {
    $(id).hover(
        function() {
            $('#player').jPlayer("setMedia", {mp3: url}).jPlayer("play");
        },
        function() {
            $('#player').jPlayer("stop");
        }
    );
}

除 iOS 上的 Mobile Safari 外，它运行良好:jPlayer doesn't play audio file automatically in iPad ，从中我了解到只有用户操作(点击/点击但不是“悬停”，这在触摸屏上没有意义)可以触发 HTML5 播放。

我喜欢 .hover 调用，因为它在 iPad 上运行得非常好。第一次快速点击将触发悬停状态，然后第二次点击将跟随链接。点击其他方 block 将恢复之前悬停的方 block 。如果我选择使用来自 jquery-mobile 的“tap”事件来模拟它，那将会很麻烦。

我想知道解决这个问题的捷径是什么。我正在为所有依赖项使用最新的稳定版本。

Answer 1

好的，我会自己回答。

事实证明，这并不太麻烦。即使我不使用 mouseover/mouseenter，Mobile Safari 仍会将 mouseover/mouseout 发送到“热门项目”。我不必专门跟踪磁贴。

我最终得到了这样的东西:

if (Modernizr.touch) {
    $(id).click(
        function (e) {
            if ($(id).hasClass('playing')) {
                $(id).trigger('mouseout');
            } else {
                e.preventDefault();
                $(id).addClass('playing');
                $('#player').jPlayer("setMedia", {mp3: url}).jPlayer("play");
            }
        });
    $(id).mouseout(
        function () {
            $(id).removeClass('playing');
            $('#player').jPlayer("stop");
        });
} else {
    $(id).hover(
        function () {
            $('#player').jPlayer("setMedia", {mp3: url}).jPlayer("play");
        },
        function () {
            $('#player').jPlayer("stop");
        }
    );
}

它使用了modernizr检测触摸设备。这基本上是“第一次点击悬停，第二次点击跟随”行为的手动实现。而且您不必跟踪热磁贴。