JQuery mouseenter runs on ios Safari and other touch devices. How to stop it?

Question

I have the following code on my site:

    /* 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');
    });

The idea is that on devices with a mouse, each map will show small arrows when the mouse hangs over them. On touch devices, these arrows should never appear, because you can use a map instead.

The problem is that the jQuery mouseenter event fires in Safari iOS when a map is clicked. Not always, but especially when you click the image inside the map. However, this seems rather random. Can Safari be disabled from hover registration?

Answer 1

, , modernizr no-touch html modernizr js,

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

. js part http://www.hongkiat.com/blog/detect-touch-device-modernizr/

Answer 2

Virtual Mouse (vmouse) Bindings jQuery Mobile, - :

    $('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/