「懸停」在iPad上播放音樂

Question

我正在設計一個包含多個圖塊的網頁。在桌面上，徘徊在每瓦將觸發jPlayer開始播放音樂的預覽，代碼要做到這一點（使用jQuery）是：

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

它工作得很好，除了移動Safari瀏覽器在iOS上：jPlayer doesn't play audio file automatically in iPad，從中我瞭解到，只有用戶操作（點擊/點按，而不是'懸停'，這在觸摸屏上沒有意義）可能會觸發HTML5播放。

我喜歡.hover調用，因爲它在iPad上工作得非常好。首先快速點擊會觸發懸停狀態，然後第二次點擊會跟隨鏈接。點擊其他瓷磚將恢復以前的懸停瓷磚。如果我選擇使用jquery-mobile中的「tap」事件來模擬這個事件，那將會很麻煩。

我在想這是什麼捷徑解決方案。我正在爲所有依賴項使用最新的穩定版本。

Answer 1

好的，我會自己回答。

事實證明，這並不是太麻煩。即使我沒有使用mouseover/mouseenter，移動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來檢測觸摸設備。這基本上是手動執行'首先輕擊懸停，第二輕擊遵循'的行爲。你不必跟蹤熱瓷磚。