터치 인 터치가 가능한 브라우저에서 마우스 오버를 어떻게 시뮬레이션합니까? {

다음과 같은 HTML을 사용합니다.

<p>Some Text</p>

다음과 같은 CSS :

p {
  color:black;
}

p:hover {
  color:red;
}

터치 지원 장치에서 길게 터치하여 호버를 복제하려면 어떻게해야합니까? 마크 업을 변경하거나 JS 등을 사용할 수 있지만이 작업을 수행하는 쉬운 방법을 생각할 수 없습니다.

답변

좋아, 내가 해냈어! CSS를 약간 변경하고 JS를 추가하는 작업이 포함됩니다.

jQuery를 사용하여 쉽게 만들기 :

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

영어 : 터치를 시작하거나 종료 할 때 수업을 hover_effect켜거나 끕니다.

그런 다음 HTML에서이 작업을 수행하려는 모든 항목에 클래스 호버를 추가하십시오. CSS에서 다음 인스턴스를 교체합니다.

element:hover {
    rule:properties;
}

와

element:hover, element.hover_effect {
    rule:properties;
}

유용성을 높이기 위해 CSS에도 다음을 추가하십시오.

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
}

이미지를 복사 / 저장 / 선택하라는 브라우저를 중지하려면.

쉬운!

답변

당신이해야 할 일은 부모에게 touchstart를 바인딩하는 것입니다. 다음과 같이 작동합니다.

$('body').on('touchstart', function() {});

함수에서 아무것도 할 필요가 없으며 비워 두십시오. 이것은 호버링을하기에 충분하므로 터치는 : hover와 비슷하고 덜 : active처럼 작동합니다. iOS 마술.

답변

이 시도:

<script>
document.addEventListener("touchstart", function(){}, true);
</script>

그리고 CSS에서 :

element:hover, element:active {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
-webkit-touch-callout: none /*only to disable context menu on long press*/
}

이 코드를 사용하면 추가 .hover 클래스가 필요하지 않습니다!

답변

주요 질문에 답하려면 “터치 인 터치 지원 브라우저에서 마우스 오버를 어떻게 시뮬레이션합니까?”

화면을 탭하여 요소를 ‘클릭’한 다음 hoverJavaScript를 사용 하여 이벤트를 트리거하기 만하면 됩니다.

var p = document.getElementsByTagName('p')[0];
p.onclick = function() {
 // Trigger the `hover` event on the paragraph
 p.onhover.call(p);
};

hover장치에 이벤트 가있는 한 작동 합니다 (일반적으로 사용되지 않더라도).

업데이트 : 방금 iPhone에서이 기술을 테스트했는데 제대로 작동하는 것 같습니다. 여기에서 시도해보세요 : http://jsfiddle.net/mathias/YS7ft/show/light/

대신 ‘긴 터치’를 사용하여 호버를 트리거하려면 위의 코드 스 니펫을 시작점으로 사용하고 타이머와 물건을 재미있게 사용할 수 있습니다.)

답변

더욱 개선 된 솔루션

처음에는 Rich Bradshaw의 접근 방식을 따랐 지만 문제가 나타나기 시작했습니다. 수행하여 e.preventDefault을 () 에 ‘touchstart’ 이벤트 페이지 더 이상 스크롤 및,도 긴 키를 눌러 옵션 메뉴도 더블 클릭 줌을 발사 할 수있는 실행을 완료 할 수 있습니다.

해결책은 어떤 이벤트가 호출되고 있는지 알아 내고 나중에 ‘touchend’ 에서 e.preventDefault () 만 찾을 수 있습니다 . scroll의 ‘touchmove’ 는 ‘touchend’ 보다 먼저 나오므로 기본적으로 유지되며 ‘click’ 도 모바일에 적용되는 이벤트 체인에서 뒤 따르기 때문에 다음 과 같이 금지됩니다.

// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {

    // If event is 'touchend' then...
    if (e.type == 'touchend') {
        // Ensuring we event prevent default in all major browsers
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    }

    // Add class responsible for :hover effect
    $(this).toggleClass('hover_effect');
});

그러나 옵션 메뉴가 나타나면 더 이상 ‘touchend’ 가 실행되지 않습니다. 클래스를 토글하는 다음 번에는 호버 동작이 완전히 이 될 것입니다.

그런 다음 해결책은 조건부로 우리가 어떤 이벤트에 있는지 알아 내거나 별도의 이벤트를 수행하고 ‘touchstart’ 및 ‘touchend’ 에서 각각 addClass () 및 removeClass ()를 사용 하여 항상 시작하고 끝나도록하는 것입니다. 조건부로 결정하는 대신 각각 추가 및 제거합니다. 완료하기 위해 제거 콜백을 ‘focusout’ 이벤트 유형에 바인딩하여 다음과 같이 유지되고 다시 방문하지 않을 수있는 링크의 호버 클래스를 지우는 책임을집니다.

$('.static_parent').on('touchstart', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('touchend focusout', '.link', function (e) {
    // Think double click zoom still fails here
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    $(this).removeClass('hover_effect');
});

주의 : 일부 버그는 이전의 두 솔루션에서 여전히 발생하며 테스트되지 않은 두 번 클릭 확대 / 축소도 여전히 실패한다고 생각합니다.

깔끔하고 희망적으로 버그가없는 (아님 :)) 자바 스크립트 솔루션

이제 두 번째로 깔끔하고 깔끔하며 반응이 빠른 방법으로 자바 스크립트 (.hover 클래스와 의사 : hover를 혼합하지 않음)를 사용하고 범용 (모바일 및 데스크톱) ‘클릭’ 이벤트 에서 ajax 동작을 직접 호출 할 수있는 방법을 사용합니다. , 필연적으로 이벤트 체인에서 서로의 콜백을 변경하지 않고도 터치 및 마우스 이벤트를 함께 혼합 할 수있는 방법을 마침내 이해 한 꽤 잘 대답 된 질문 을 찾았 습니다. 방법은 다음과 같습니다.

$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
    $(this).addClass('hover_effect');
});

$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
    $(this).removeClass('hover_effect');

    // As it's the chain's last event we only prevent it from making HTTP request
    if (e.type == 'click') {
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        // Ajax behavior here!
    }
});

답변

hover터치 장치에서는 마우스 효과를 구현할 수 없습니다. 내가 CSS에서 safari ios사용 :active했던 것과 같은 상황으로 나타 났을 때 효과를 내었다.

즉.

p:active {
  color:red;
}

제 경우에는 작동합니다. 이것은 자바 스크립트를 사용하여 사용할 수있는 경우 일 수도 있습니다. 시도해보세요.

답변

이 코드를 추가 한 다음 이러한 방식으로 작업하려는 요소에 “tapHover”클래스를 설정합니다. 요소를 처음 탭하면 가상 클래스 “: hover”및 클래스 “tapped”가 생성됩니다. 클릭 이벤트가 차단됩니다. 두 번째로 동일한 요소를 탭하면 클릭 이벤트가 발생합니다.

// Activate only in devices with touch screen
if('ontouchstart' in window)
{
    // this will make touch event add hover pseudoclass
    document.addEventListener('touchstart', function(e) {}, true);

    // modify click event
    document.addEventListener('click', function(e) {
        // get .tapHover element under cursor
        var el = jQuery(e.target).hasClass('tapHover')
            ? jQuery(e.target)
            : jQuery(e.target).closest('.tapHover');

        if(!el.length)
            return;

        // remove tapped class from old ones
        jQuery('.tapHover.tapped').each(function() {
            if(this != el.get(0))
                jQuery(this).removeClass('tapped');
        });

        if(!el.hasClass('tapped'))
        {
            // this is the first tap
            el.addClass('tapped');
            e.preventDefault();
            return false;
        }
        else
        {
            // second tap
            return true;
        }
    }, true);
}
.box {
	float:		left;

	display:	inline-block;
	margin:		50px 0 0 50px;
	width:		100px;
	height:		100px;
	overflow:	hidden;

	font-size:	20px;

	border:		solid 1px black;
}
.box.tapHover {
	background:	yellow;
}
.box.tapped {
	border:		solid 3px red;
}
.box:hover {
	background:	red;
}
<div class="box" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>
<div class="box tapHover" onclick="this.innerHTML = Math.random().toFixed(5)"></div>

스 니펫 확장