當我在智能手機上顯示時添加onhover到我的頁面

Question

當您將鼠標懸停在菜單上時，我從計算機使用您的頁面時，我收到一個菜單以選擇語言。

在智能手機上使用手時，我想要做同樣的事情。

我試圖使用這個Hammer.js，但它不起作用。在我的代碼下面。

$(document).ready(function(){ 
    var languageToChange = $('.lang-list a'); 
    var change = Hammer(languageToChange).on('tap', function(event){ 
     alert(event); 
    }); 
}); 

Answer 1

您應該檢測屏幕的寬度，如果它低於780像素，請使用tap，否則使用懸停事件。 Bootstrap可以幫助你很多製作resposive網站。如果你不想用它嘗試是這樣的：

function desktopEvent(text){ 
    alert("Desktop:" + text); 
} 
function mobileEvent(event){ 
    alert("Mobile" + text); 
} 

$(document).ready(function(){ 

    var languageToChange = $('.lang-list a'); 
    var change; 
    if ($(document).width() < 780){ 
     change = Hammer(languageToChange).on('tap', mobileEvent(event)); 
    } else { 
     change = Hammer(languageToChange).on('mouseover', desktopEvent(event)); 
    } 
});