在ios Safari和其他觸摸設備上觸發了jquery mouseenter。 怎么阻止它？

Question

我的網站上有以下代碼：

    /* Show arrows when card is hovered */
    $('BODY').on('mouseenter', '.card', function (event) {
        $(this).addClass('is-hovered');
    });

    $('BODY').on('mouseleave', '.card', function (event) {
        $(this).removeClass('is-hovered');
    });

這個想法不僅僅是帶有鼠標的設備，當鼠標懸停在它們上面時，每張卡都會顯示小箭頭。 在觸摸設備上，這些箭頭永遠不會出現，因為可以刷卡。

問題是當您按下卡時，iOS Safari上會觸發jQuery mouseenter事件。 並非總是如此，尤其是在按下卡內的圖像時。 雖然它看起來相當隨意。 我可以禁用Safari注冊懸停嗎？

Answer 1

使用檢測觸摸設備的庫，例如modernizr將類no-touch添加到html標記或通過modernizr js使用

if (Modernizr.touch) { //is touch }else{ //is screen }

請參閱此處有關js部分http://www.hongkiat.com/blog/detect-touch-device-modernizr/

Answer 2

您可以嘗試使用來自jQuery Mobile Virtual Mouse (vmouse) Bindings ，如下所示：

    $('BODY').on('vmouseover', '.card', function (event) {
        $(this).addClass('is-hovered');
    });

    $('BODY').on('vmouseout', '.card', function (event) {
        $(this).removeClass('is-hovered');
    });

關於這些事件：

http://api.jquerymobile.com/vmouseover/

http://api.jquerymobile.com/vmouseout/