IT story

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭

hot-time 2020. 7. 14. 07:58

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭

나는 jquery 마우스 이벤트를 사용하는 몇 년 전에 내가 만든 웹 사이트를 가지고 있습니다 ... 방금 ipad를 얻었고 모든 마우스 오버 이벤트가 클릭으로 번역되는 것을 알았습니다 ... 예를 들어 하나 대신 두 번 클릭해야합니다 .. (실제 클릭보다 첫 번째 호버)

이 문제를 해결할 준비가 되셨습니까? 어쩌면 내가 shoudl jquery 명령을 mouseover / out 등 대신 사용했을 수도 있습니다. 감사합니다!

이것을 완전히 테스트하지는 않았지만 iOS가 터치 이벤트를 발생시키기 때문에 jQuery 설정에 있다고 가정하면 작동 할 수 있습니다.

$('a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
});

아이디어는 Mobile WebKit touchend이 탭이 끝날 때 이벤트를 시작하므로 이벤트를 수신 한 다음 touchend링크에서 이벤트가 시작 되 자마자 브라우저를 리디렉션하는 것 입니다.

귀하의 질문이 무엇인지 완전히 명확하지는 않지만 마우스에 대한 호버 효과를 유지하면서 더블 클릭을 제거하려면 다음을 수행하십시오.

touchstart및에 호버 효과를 추가합니다 mouseenter.
에 영향을 가져가 제거 mouseleave, touchmove및 click.

배경

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

touchstart
touchmove
touchend
브라우저가 더블 탭이 아닌 단일 탭인지 확인하는 300ms 지연
mouseover
mouseenter
- 참고 하십시오 경우 mouseover, mouseenter또는 mousemove이벤트 페이지 내용을 변경, 다음 이벤트가 실행되지 않습니다.
mousemove
mousedown
mouseup
click

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

더 나쁜 것은, 마우스 오버 이벤트가 페이지 컨텐츠를 변경하면 Safari 웹 컨텐츠 안내서-이벤트 처리 , 특히 One-Finger Events의 그림 6.4에 설명 된대로 클릭 이벤트가 발생하지 않습니다 . "콘텐츠 변경"은 브라우저와 버전에 따라 다릅니다. iOS 7.0의 경우 배경색 변경이 더 이상 콘텐츠 변경이 아님을 발견했습니다.

솔루션 설명

요약하자면:

touchstart및에 호버 효과를 추가합니다 mouseenter.
에 영향을 가져가 제거 mouseleave, touchmove및 click.

에 대한 조치는 없습니다 touchend.

이것은 마우스 이벤트에서 분명히 작동합니다. mouseenter및 mouseleave(약간 개선 된 버전 mouseover및 mouseout)이 실행되고 호버를 추가 및 제거합니다.

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

터치 이벤트에도 touchstart적용됩니다. 호버 효과가 추가되었습니다. 에서 '' ''not '' ''제거되었습니다 touchend. 에 다시 추가되며 mouseenter, 이로 인해 컨텐츠가 변경되지 않으므로 (이미 추가 된) click이벤트도 발생하며 사용자가 다시 클릭 할 필요없이 링크가 따라갑니다!

브라우저가 touchstart이벤트 사이에 있고 지연 click시간이 짧은 시간 동안 표시되기 때문에 실제로는 잘 사용됩니다.

사용자가 클릭을 취소하기로 결정한 경우 손가락을 움직이면 정상적으로 작동합니다. 일반적으로 mouseleave이벤트가 발생 하지 않으며 호버 효과가 그대로 유지 되므로 문제 가됩니다. 고맙게도에 대한 호버 효과를 제거하면 쉽게 해결할 수 있습니다 touchmove.

그게 다야!

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

대체 솔루션

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

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

추가 자료

http://jsfiddle.net/macfreek/24Z5M/ . 이 샌드 박스에서 위의 솔루션을 직접 테스트하십시오.
http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser . 조금 더 많은 배경을 가진 동일한 대답.
http://www.html5rocks.com/en/mobile/touchandmouse/ . 터치와 마우스에 대한 html5rocks.com의 훌륭한 배경 기사.
https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Safari 웹 컨텐츠 안내서-이벤트 처리. 특정 그림 6.4를 참조하십시오.이 그림에서는 mouseover또는 mousemove이벤트 중에 내용이 변경된 후 더 이상 이벤트가 발생하지 않습니다 .

모바일 브라우저에서 iPad / iPhone 더블 클릭 문제 및 호버 효과 비활성화를 참조하십시오 .

결국 CSS 솔루션이있는 것 같습니다. Safari가 두 번째 터치를 기다리는 이유는 일반적으로 : hover 이벤트에 할당 한 배경 이미지 (또는 요소) 때문입니다. 표시 할 것이 없으면 아무런 문제가 없습니다. 해결책은 보조 CSS 파일 (또는 JS 접근법의 경우 스타일)을 사용하여 iOS 플랫폼을 대상으로하는 것입니다. 예를 들어 배경 위에 마우스를 올려 놓으면 예를 들어 상속하고 마우스 위에 표시 할 요소를 숨 깁니다.

다음은 CSS와 HTML의 예입니다. 마우스 위에 별표가 표시된 제품 블록입니다.

HTML :

<a href="#" class="s"><span class="s-star"></span>Some text here</a>

CSS :

.s {
   background: url(some-image.png) no-repeat 0 0;

}
.s:hover {
   background: url(some-image-r.png) no-repeat 0 0;
}

.s-star {
   background: url(star.png) no-repeat 0 0;
   height: 56px;
   position: absolute;
   width: 72px;
   display:none;
}

.s:hover .s-star {
   display:block;
}

솔루션 (보조 CSS) :

/* CSS */
/* Keep hovers the same or hidden */
.s:hover {
   background:inherit;
}
.s:hover .s-star {
   display:none;
}

나를 위해 일한 것은 다른 사람들이 이미 말한 것입니다.

호버 또는 mousemove (내 경우에는 이벤트)에서 요소를 표시하거나 숨기지 마십시오.

Apple의 의견 ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ) 은 다음과 같습니다 .

클릭 가능한 요소는 링크, 양식 요소, 이미지 맵 영역 또는 mousemove, mousedown, mouseup 또는 onclick 핸들러가있는 기타 요소입니다.

사용자가 클릭 가능한 요소를 누르면 이벤트가 mouseover, mousemove, mousedown, mouseup 및 click 순서로 도착합니다. 또한 페이지의 내용이 mousemove 이벤트에서 변경되면 시퀀스의 후속 이벤트가 전송되지 않습니다. 이 동작을 통해 사용자는 새 컨텐츠를 활용할 수 있습니다.

따라서 @woop의 솔루션을 사용할 수 있습니다 : userAgent를 감지하고 iOS 장치인지 확인한 다음 이벤트를 바인딩하십시오. 나는이 기술을 내 요구에 적합하기 때문에 결국 사용했으며 원하지 않는 경우 호버 이벤트를 바인딩하지 않는 것이 더 합리적입니다.

그러나 ... userAgents를 엉망으로 만들고 싶지 않고 호버 / 마우스 이동에서 요소를 숨기거나 표시하려면 다음과 같이 기본 자바 스크립트를 사용하여 그렇게 할 수 있음을 알았습니다.

$("body").on("mouseover", function() {
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
});

이것은 데스크톱 버전에서 작동하며 모바일 버전에서는 아무 것도 수행하지 않습니다.

그리고 조금 더 호환성을 위해 ...

$("body").on("mouseover", function() {
   if (document.getElementsByTagName && document.querySelector) { // check compatibility
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
    } else {
        $(".my-class").show();
        $(".my-selector div").hide();
    }
});

cduruk의 솔루션은 매우 효과적 이었지만 내 사이트의 일부에서 문제를 일으켰습니다. CSS jover 클래스를 추가하기 위해 jQuery를 이미 사용하고 있었기 때문에 가장 쉬운 해결책은 단순히 모바일 장치에 CSS 호버 클래스를 추가하지 않는 것입니다 (보다 정확하게는 모바일 장치가 아닌 경우에만 추가하는 것).

일반적인 아이디어는 다음과 같습니다.

var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);

if (!(ios)) {
    $(".portfolio-style").hover(
        function(){
            $(this).stop().animate({opacity: 1}, 100);
            $(this).addClass("portfolio-red-text");
        },
        function(){
            $(this).stop().animate({opacity: 0.85}, 100);
            $(this).removeClass("portfolio-red-text");
        }
    );
}

* 예시 목적으로 코드가 줄어듬

지나치게 복잡하게 만들 필요가 없습니다.

$('a').on('touchend', function() {
    $(this).click();
});

mouseenter대신에 시도 하는 것이 현명하다고 생각합니다 mouseover. 바인딩 할 때 내부적으로 사용 .hover(fn,fn)되며 일반적으로 원하는 것입니다.

기존 솔루션에 다음과 같은 문제가 있었으며 모두 해결하는 것으로 나타났습니다. 이것은 크로스 브라우저, 크로스 장치 및 장치 스니핑을 원하지 않는 것을 목표로한다고 가정합니다.

이것이 해결하는 문제

그냥 touchstart또는 사용 touchend:

사람들이 콘텐츠를 지나서 스크롤하려고 할 때 이벤트가 시작되도록하고 스 와이프를 시작할 때이 요소 위에 손가락을 대면 예기치 않은 동작이 발생합니다.
바탕 화면을 마우스 오른쪽 버튼으로 클릭하는 것과 마찬가지로 이벤트를 길게 누르는 경우 이벤트가 시작될 수 있습니다. 예를 들어 클릭 이벤트가 URL X로 이동하고 사용자가 길게 눌러 새 탭에서 X를 열면 사용자가 두 탭에서 X가 열려있는 것을 혼동하게됩니다. 일부 브라우저 (예 : iPhone)에서는 길게 누르기 메뉴가 나타나지 않을 수도 있습니다.

트리거링 mouseover이벤트를 touchstart하고 mouseout에 것은 touchmove덜 심각한 결과를 가지고 있지만, 예를 들어, 일반적인 브라우저의 동작을 방해 않습니다

길게 누르면 마우스 오버가 끝나지 않습니다.
대부분의 안드로이드 브라우저에 손가락의 위치를 취급 touchstart유사한 mouseover되는, mouseout다음에 에드 touchstart. 따라서 Android에서 마우스 오버 콘텐츠를 보는 한 가지 방법은 관심 영역을 터치하고 손가락을 흔들면서 페이지를 약간 스크롤하는 것입니다. 취급하면 touchmove이 문제 mouseout가 해결됩니다.

해결책

이론적 touchmove으로을 사용하여 플래그를 추가 할 수 있지만 이동이없는 경우에도 iPhone은 touchmove를 트리거합니다. 이론적으로, 당신은 단지 비교할 수 touchstart및 touchend이벤트 pageX등을 pageY 하지만 아이폰에 더 없다 touchend pageX나pageY .

불행히도 모든 기지를 덮으면 조금 더 복잡해집니다.

$el.on('touchstart', function(e){
    $el.data('tstartE', e);
    if(event.originalEvent.targetTouches){
        // store values, not reference, since touch obj will change
        var touch = e.originalEvent.targetTouches[0];
        $el.data('tstartT',{ clientX: touch.clientX, clientY: touch.clientY } );
    }
});
$el.on('touchmove', function(e){
    if(event.originalEvent.targetTouches){
        $el.data('tstartM', event.originalEvent.targetTouches[0]);
    }
});

$el.on('click touchend', function(e){
    var oldE = $el.data('tstartE');
    if( oldE && oldE.timeStamp + 1000 < e.timeStamp ) {
        $el.data('tstartE',false);
        return;
    }
    if( $el.data('iosTouchM') && $el.data('tstartT') ){
        var start = $el.data('tstartT'), end = $el.data('tstartM');
        if( start.clientX != end.clientX || start.clientY != end.clientY ){
            $el.data('tstartT', false);
            $el.data('tstartM', false);
            $el.data('tstartE',false);
            return;
        }
    }
    $el.data('tstartE',false);

이론적으로 1000을 근사치로 사용하는 대신 정확히 길게 누르는 데 사용되는 정확한 시간을 얻는 방법이 있지만 실제로는 그렇게 간단하지 않으며 합리적인 프록시를 사용하는 것이 가장 좋습니다 .

MacFreak의 답변은 저에게 매우 도움이되었습니다. 여기 도움이 될만한 실습 코드가 있습니다.

문제 - 터치 엔드를 적용 한다는 것은 요소 위에서 손가락을 스크롤 할 때마다 스크롤 하려는 순간에도 터치 한 것처럼 반응 한다는 의미입니다.

jQuery를 사용하여 마우스 버튼을 강조 표시하기 위해 일부 버튼 아래에 선을 페이드 인하는 효과를 만들고 있습니다. 나는 이것이 링크를 따르기 위해 터치 장치에서 버튼을 두 번 눌러야한다는 것을 의미하지는 않습니다.

버튼은 다음과 같습니다.

<a class="menu_button" href="#">
    <div class="menu_underline"></div>
</a>

"menu_underline"div가 mouseover에서 페이드 업되고 mouseout에서 페이드 아웃되기를 원합니다. 그러나 터치 장치가 두 번이 아닌 한 번의 클릭으로 링크를 따라갈 수 있기를 바랍니다.

솔루션 -작동하도록하는 jQuery는 다음과 같습니다.

//Mouse Enter
$('.menu_button').bind('touchstart mouseenter', function(){
    $(this).find(".menu_underline").fadeIn();
});

//Mouse Out   
$('.menu_button').bind('mouseleave touchmove click', function(){
    $(this).find(".menu_underline").fadeOut();
});

이 MacFreak에 도움을 주셔서 감사합니다.

빈 리스너를 추가하면 이유가 무엇인지 묻지 않고 작동한다는 것을 알았습니다.하지만 iOS 9.3.2가 설치된 iPhone 및 iPad에서 테스트했는데 정상적으로 작동했습니다.

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    var elements = document.getElementsByTagName('a');
    for(var i = 0; i < elements.length; i++){
        elements[i].addEventListener('touchend',function(){});
    }
}

나는 당신의 링크에 onmouseover 이벤트가 없다고 생각합니다. 여기서 1 탭은 onmouseover를 활성화하고 더블 탭은 링크를 활성화합니다. 하지만 idk. iPad가 없습니다. 제스처 / 터치 이벤트를 사용해야한다고 생각합니다.

https://developer.apple.com/documentation/webkitjs

나는 같은 문제가 있었지만 터치 장치에는 없었습니다. 클릭 할 때마다 이벤트가 트리거됩니다. 이벤트 큐잉에 관한 것이 있습니다.

그러나 내 솔루션은 다음과 같습니다. 클릭 이벤트 (또는 터치?)는 타이머를 설정합니다. X ms 이내에 링크를 다시 클릭하면 false 만 반환됩니다.

요소 별 타이머를 설정하려면을 사용할 수 있습니다 $.data().

또한 위에서 설명한 @Ferdy 문제를 해결할 수도 있습니다.

Modernizr을 사용하면 앞에서 언급 한 것처럼 Modernizr.touch를 사용하는 것이 매우 쉽습니다.

그러나 안전을 위해 Modernizr.touch와 사용자 에이전트 테스트를 함께 사용하는 것이 좋습니다.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

Modernizr을 사용하지 않으면 Modernizr.touch위 의 함수를('ontouchstart' in document.documentElement)

또한 사용자 에이전트 인 iemobile을 테스트하면 Windows Phone보다 감지 된 Microsoft 모바일 장치의 범위가 더 넓어집니다.

을 사용할 수 있습니다 click touchend.

예:

$('a').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

위의 예는 터치 장치의 모든 링크에 영향을 미칩니다.

특정 링크 만 타겟팅하려는 경우 다음과 같이 클래스를 설정하여이 작업을 수행 할 수 있습니다.

HTML :

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

jquery :

$('a.prevent-extra-click').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

건배,

제로 엔

이벤트가 요소의 mouseenter / mouseleave / click 상태에 바인딩 된 비슷한 상황이 발생했지만 iPhone에서는 사용자가 요소를 두 번 클릭하여 mouseenter 이벤트를 먼저 트리거 한 다음 다시 click 이벤트를 발생시켜야했습니다. .

위와 비슷한 방법 으로이 문제를 해결했지만 jQuery $ .browser 플러그인 (jQuery 1.9> 용)을 사용하고 다음과 같이 mouseenter 바인딩 이벤트에 .trigger 이벤트를 추가했습니다.

// mouseenter event
$('.element').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
    // insert click events below
});

.trigger는 iPhone 또는 iPad에서 볼 때 요소를 마우스로 입력 (또는 초기 클릭) 할 때 .click 이벤트 핸들러를 실행하여 요소를 두 번 클릭하지 않아도됩니다. 가장 우아한 솔루션은 아니지만 제 경우에는 훌륭하게 작동하며 이미 설치된 플러그인을 사용하며 기존 장치가 이러한 장치에서 작동하도록 단일 코드 줄을 추가해야했습니다.

여기에서 jQuery $ .browser 플러그인을 얻을 수 있습니다 : https://github.com/gabceb/jquery-browser-plugin

실수로 링크에서 손가락을 움직일 때 리디렉션을 피하기위한 개선 사항 일뿐입니다.

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == 'touchmove') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it's a simple touchend, data() for this element doesn't exist.
    if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

MacFreak에서 영감을 얻어 나에게 적합한 것을 모았습니다.

이 js 방법은 호버가 ipad에 붙는 것을 방지하고 클릭이 두 번의 클릭으로 등록되는 것을 방지합니다. CSS에서 CSS에 : hover psudo 클래스가 있으면 .hover로 변경하십시오 (예 : .some-class : hover to .some-class.hover).

ipad에서이 코드를 테스트하여 css와 js hover 메소드가 어떻게 다르게 작동하는지 확인하십시오 (호버 효과 만). CSS 버튼에는 멋진 클릭 알림이 없습니다. http://jsfiddle.net/bensontrent/ctgr6stm/

function clicker(id, doStuff) {
  id.on('touchstart', function(e) {
    id.addClass('hover');
  }).on('touchmove', function(e) {
    id.removeClass('hover');
  }).mouseenter(function(e) {
    id.addClass('hover');
  }).mouseleave(function(e) {
    id.removeClass('hover');
  }).click(function(e) {
    id.removeClass('hover');
    //It's clicked. Do Something
    doStuff(id);
  });
}

function doStuff(id) {
  //Do Stuff
  $('#clicked-alert').fadeIn(function() {
    $(this).fadeOut();
  });
}
clicker($('#unique-id'), doStuff);

button {
  display: block;
  margin: 20px;
  padding: 10px;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.hover {
  background: yellow;
}
.btn:active {
  background: red;
}
.cssonly:hover {
  background: yellow;
}
.cssonly:active {
  background: red;
}
#clicked-alert {
  display: none;
}

<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>

</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover

터치 스크롤을 깨지 않고 링크를 작동시키기 위해 jQuery Mobile의 "탭"이벤트로이를 해결했습니다.

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });

너무 늦었습니다. 그러나 이것은 내가 찾은 가장 쉬운 해결 방법 중 하나입니다.

    $('body').on('touchstart','*',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent('MouseEvents');
            eventObj.initEvent('click',true,true);
            element.dispatchEvent(eventObj);
        }
    });

이것은 링크 (앵커 태그)뿐만 아니라 다른 요소에도 작동합니다. 도움이 되었기를 바랍니다.

이 짧은 스 니펫이 작동하는 것 같습니다. 링크를 누르면 클릭 이벤트가 트리거됩니다.

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });

다른 답변의 어느 것도 나를 위해 작동하지 않습니다. 내 응용 프로그램에는 많은 이벤트 리스너, 자체 확인란 및 리스너가있는 링크 및 리스너가없는 링크가 있습니다.

나는 이것을 사용한다 :

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: http://stackoverflow.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand/12801548#12801548
    this.click();
    // prevents double click
    $this.data("touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});

jquery UI 드롭 다운이있을 때 저에게 효과적입니다.

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      $('.ui-autocomplete').off('menufocus hover mouseover');
}

다음 navigator.userAgent과 같이 확인할 수 있습니다 .

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

그러나 블랙 베리, 드로이드, 기타 다른 터치 스크린 장치를 확인해야합니다. userAgent에 Mozilla, IE, Webkit 또는 Opera가 포함 된 경우에만 마우스 오버를 바인드 할 수 있지만, 예를 들어 Droid가 userAgent 문자열을 다음과 같이보고하므로 일부 장치를 계속 검사해야합니다.

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

아이폰의 끈은 비슷합니다. iPhone, iPod, iPad, Android 및 Blackberry 만 검색하면 대부분의 핸드 헬드를 얻을 수 있지만 전부는 아닙니다.

태블릿과 휴대 기기를 제외한 CSS 미디어 쿼리를 작성하고 마우스를 올리면됩니다. 이를 위해 jQuery 또는 JavaScript가 실제로 필요하지 않습니다.

@media screen and (min-device-width:1024px) {
    your-element:hover {
        /* Do whatever here */
    }
}

그리고 이것을 해상도가 아닌 실제 픽셀로 계산하도록 html 헤드에 추가하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

참고 URL : https://stackoverflow.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link

'IT story' 카테고리의 다른 글

C에서 변수 선언 배치 (0)	2020.07.14
Django 모델에 목록을 저장하는 가장 효율적인 방법은 무엇입니까? (0)	2020.07.14
Amazon S3와 Amazon EC2 인스턴스의 차이점은 무엇입니까? (0)	2020.07.13
일식에서 "디버그 관점으로 자동 전환"모드를 끄려면 어떻게해야합니까? (0)	2020.07.13
GHC로 컴파일 된 스몰 하스켈 프로그램 (0)	2020.07.13

현재글iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭

hot-time

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭

배경

솔루션 설명

대체 솔루션

추가 자료

이것이 해결하는 문제

해결책

'IT story' 카테고리의 다른 글

'IT story'의 다른글

티스토리툴바

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭

iPad / iPhone 호버 문제로 인해 사용자가 링크를 두 번 클릭

배경

솔루션 설명

대체 솔루션

추가 자료

이것이 해결하는 문제

해결책

'IT story' 카테고리의 다른 글

'IT story'의 다른글

관련글

티스토리툴바