Question

我正在设计一个包含多个图块的网页。在桌面上，悬停每个磁贴将触发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，我从中了解到只有用户操作（点击/点按但不是＆＃39;悬停＆＃39;哪个，没有＆＃39; t在触摸屏上有意义）可以触发HTML5播放。

我喜欢.hover电话，因为它在iPad上运行得非常好。首先快速点击将触发悬停状态，然后第二次点击将跟随链接。点击其他瓷砖将恢复以前悬停的瓷砖。如果我选择使用＆＃39; tap＆＃39;来自jquery-mobile的活动，会有很多麻烦。

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

Answer 1

好的，我会自己回答。

事实证明，这不是一件麻烦事。即使我不使用鼠标悬停/鼠标中心，Mobile Safari仍会将鼠标悬停/鼠标输出发送到“热门项目”。我没有专门跟踪瓷砖。

我最终得到了类似的东西：

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

“悬停”在iPad上播放音乐

1 个答案: