나는 당신의 질문에서 당신의 호버 효과가 당신의 페이지의 내용을 변경한다는 것을 받아들입니다. 이 경우 내 조언은 다음과 같습니다.

• touchstart및에 호버 효과를 추가합니다 mouseenter.
• mouseleave, touchmove및 에서 마우스 오버 효과를 제거합니다 click.

또는 콘텐츠 변경이없는 페이지를 편집 할 수 있습니다.

배경

마우스를 시뮬레이션하기 위해 Webkit 모바일과 같은 브라우저는 사용자가 터치 스크린 (예 : iPad)에서 손가락을 뗀 경우 다음 이벤트를 발생시킵니다 (출처 : html5rocks.com의 Touch And Mouse ).

1. touchstart
2. touchmove
3. touchend
4. 300ms 지연, 브라우저는 이것이 두 번 탭이 아니라 한 번 탭인지 확인합니다.
5. mouseover
6. mouseenter
   • 참고 하십시오 경우 mouseover, mouseenter또는 mousemove이벤트 페이지 내용을 변경, 다음 이벤트가 실행되지 않습니다.
7. mousemove
8. mousedown
9. mouseup
10. click

단순히 웹 브라우저에 마우스 이벤트를 건너 뛰도록 지시하는 것은 불가능 해 보입니다.

더 나쁜 것은 마우스 오버 이벤트가 페이지 콘텐츠를 변경하는 경우 Safari 웹 콘텐츠 가이드-이벤트 처리 , 특히 One-Finger 이벤트의 그림 6.4에 설명 된대로 클릭 이벤트가 발생하지 않는다는 것 입니다. 정확히 “컨텐츠 변경”은 브라우저와 버전에 따라 다릅니다. iOS 7.0의 경우 배경색 변경은 콘텐츠 변경이 아닙니다 (또는 더 이상 변경되지 않습니까?).

솔루션 설명

요약하자면:

• touchstart및에 호버 효과를 추가합니다 mouseenter.
• mouseleave, touchmove및 에서 마우스 오버 효과를 제거합니다 click.

에 대한 작업이 없습니다 touchend.

이 명확하게 마우스 이벤트 작동 : mouseenter과 mouseleave(약간의 버전을 개선 mouseover하고 mouseout) 해고하고, 추가하고 호버를 제거합니다.

사용자가 실제로 click링크 된 경우 호버 효과도 제거됩니다. 이렇게하면 사용자가 웹 브라우저에서 뒤로 버튼을 누르면 제거됩니다.

이것은 터치 이벤트에서도 작동합니다. 터치 스타트시 호버 효과가 추가됩니다. 터치 엔드에서 제거되지는 않습니다. 에 다시 추가 mouseenter되고 이로 인해 콘텐츠 변경이 발생하지 않으므로 (이미 추가됨) click이벤트도 실행되고 사용자가 다시 클릭 할 필요없이 링크를 따라갑니다!

브라우저가 touchstart이벤트 사이에 발생하는 300ms 지연은 click이 짧은 시간 동안 호버 효과가 표시되기 때문에 실제로 유용하게 사용됩니다.

사용자가 클릭을 취소하기로 결정한 경우 손가락을 움직여도 정상적으로 수행됩니다. 일반적으로 이것은 mouseleave이벤트가 발생 하지 않고 호버 효과가 제자리에 남아 있기 때문에 문제 입니다. 고맙게도에서 호버 효과를 제거하면 쉽게 해결할 수 있습니다 touchmove.

그게 다야!

예를 들어 FastClick 라이브러리 를 사용하여 300ms 지연을 제거 할 수 있지만 이는이 질문의 범위를 벗어납니다.

대체 솔루션

다음 대안에서 다음과 같은 문제를 발견했습니다.

• 브라우저 감지 : 오류가 매우 발생하기 쉽습니다. 장치에 마우스 또는 터치가 있고 두 가지의 조합이 터치 디스플레이가 번식 할 때 점점 더 보편화 될 것이라고 가정합니다.
• CSS 미디어 감지 : 내가 아는 유일한 CSS 전용 솔루션입니다. 여전히 오류가 발생하기 쉬우 며 장치에 마우스 또는 터치가 있다고 가정하지만 둘 다 가능합니다.
• 클릭 이벤트 에뮬레이션 touchend: 사용자가 실제로 링크를 클릭 할 의도없이 스크롤 또는 확대 / 축소 만 원하더라도 링크를 잘못 따라갑니다.
• 변수를 사용하여 마우스 이벤트 억제 : 이는 touchend해당 시점에서 상태 변경을 방지하기 위해 후속 마우스 이벤트에서 if 조건으로 사용되는 변수를 설정합니다 . 변수는 클릭 이벤트에서 재설정됩니다. 이 페이지에서 Walter Roman의 답변을 참조하십시오. 터치 인터페이스에서 호버 효과를 원하지 않는 경우 적합한 솔루션입니다. 안타깝게도 touchend다른 이유로 a 가 실행되고 클릭 이벤트가 실행되지 않고 (예 : 사용자가 스크롤하거나 확대 / 축소 된) 마우스로 링크를 따라 가려는 경우 (예 : 마우스와 터치 인터페이스가 모두있는 장치에서) 작동하지 않습니다. ).

추가 읽기

• http://jsfiddle.net/macfreek/24Z5M/ . 이 샌드 박스에서 위의 솔루션을 직접 테스트하십시오.
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser . 약간 더 배경이있는이 같은 대답.
• https://www.html5rocks.com/en/mobile/touchandmouse/ . 일반적인 터치 및 마우스에 대한 html5rocks.com의 훌륭한 배경 기사입니다.
• https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Safari 웹 콘텐츠 가이드-이벤트 처리. 특히 그림 6.4를 참조하십시오 . 이는 mouseover또는 mousemove이벤트 중에 컨텐츠 변경 후 더 이상 이벤트가 발생하지 않음을 설명합니다 .

답변

@media screen { /* hover styles here */ }

@media handheld { /* non-hover styles here */ }

@media screen and (max-width:800px) { /* non-hover styles here */ }

var mobileNoHoverState = function() {

    var hoverClass = 'hover',
        $target = $(".foo"),
        preventMouseover = false;

    function forTouchstart() {
        preventMouseover = true;
    }

    function forMouseover() {
        if (preventMouseover === false) {
            $(this).addClass(hoverClass);
        } else {
            preventMouseover = false;
        }
    }

    function forMouseout() {
        $(this).removeClass(hoverClass);
    }

    function init() {
        $target.on({
            touchstart  : forTouchstart,
            mouseover   : forMouseover,
            mouseout    : forMouseout
        });
    }

    return {
        init: init
    };
}();

mobileNoHoverState.init();

<a href="/" class="link">Home</a>

@media (hover: hover) {
  .link:hover { /* hover styles */ }
}

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

<html class="hover-active">

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

.desktopMode .someClass:hover{ color: red }
.touchMode .mainDiv { width: 100%; margin: 0; /*etc.*/ }

@media only screen and (max-width:1024px) {

       #buttonOne{
            height: 44px;
        }


        #buttonOne:hover{
            display:none;
        }
}