1

我正在设计一个带有多个图块的网页。在桌面上，悬停每个图块将触发 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 does not play audio file automatically in iPad，我从中了解到只有用户操作（单击/点击但不是“悬停”，这在触摸屏上没有意义) 可以触发 HTML5 播放。

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

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

4

1 回答 1

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来检测触摸设备。这基本上是“第一次点击悬停，第二次点击跟随”行为的手动实现。而且您不必跟踪热磁贴。

于 2012-12-31T03:38:40.517 回答