달러(약)iPhone에서 click()이 올바르게 작동하지 않습니다. jquery

달러(약)iPhone에서 click()이 올바르게 작동하지 않습니다. jquery

이 질문에는 이미 다음과 같은 답이 있습니다.

iPhone 웹 응용 프로그램에서 클릭 이벤트에 jQuery를 사용하는 방법 (8개 답변)

마감됨6년 전에.

은 IE,, 에서는 iPhone에서 iPhone을 합니다.<img>페이지를 클릭해도 이벤트가 실행되지 않습니다.

$(document).ready(function () {
  $(document).click(function (e) {
    fire(e);
  });
});

function fire(e) { alert('hi'); }

HTML 부분은 매우 기본적이고 문제가 되지 않습니다.

아이디어 있어요?

단답:

<style>
    .clickable-div 
    {
         cursor: pointer;
    }
</style>

---

긴 답변:

중요한 것은 만약 당신이 단지 사용한다면<a>태그를 지정하면 모든 것이 예상대로 작동합니다.로 클릭할 수 .<a>iPhone의 링크와 모든 것이 사용자가 예상하는 대로 작동합니다.

텍스트와 이미지를 포함하는 패널과 같이 클릭할 수 없는 임의의 HTML을 가지고 있다고 생각합니다.<a>저는 이 문제에 대해 제가 완전히 클릭할 수 있는 패널을 가지고 있었을 때 알게 되었습니다.

<div class='clickable-div' data-href="http://www.stackoverflow.com">

 ... clickable content here (images/text) ...

</div>

이 div 내에서 클릭을 감지하기 위해 jQuery를 사용하고 있습니다.data-href위에 표시된 html 속성(이 속성은 내가 직접 만든 것이며 표준 jQuery 또는 HTML 데이터 속성이 아닙니다.)

$(document).on('click', '.clickable-div', function() {

    document.location = $(this).data('href');

});

이 기능은 데스크톱 브라우저에서는 작동하지만 iPad에서는 작동하지 않습니다.

이벤트 핸들러를 에서 변경하려고 할 수 있습니다.clickclick touchstart그리고 이것은 실제로 이벤트 핸들러를 트리거합니다.그러나 사용자가 페이지를 위로 끌어 올리려고 할 경우(스크롤)에도 트리거됩니다. 이는 끔찍한 사용자 환경입니다.[당신은 몰래 배너 광고를 통해 이 행동을 알아차렸을 수 있습니다.]

답은 믿을 수 없을 정도로 간단합니다: 그냥 CSS를 설정하세요.

<style>
    .clickable-div 
    {
         cursor: pointer;
    }
</style>

이를 통해 데스크톱 사용자는 손 아이콘으로 영역을 클릭할 수 있음을 나타낼 수 있습니다.

https://stackoverflow.com/a/4910962/16940 덕분입니다.

변경 내용:

$(document).click( function () {

이것으로

$(document).on('click touchstart', function () {

이 솔루션은 업무에 적합하지 않을 수 있으며 답변에 설명된 것처럼 적용하기에 가장 좋은 솔루션이 아닙니다.다른 사용자의 다른 수정 사항을 확인하십시오.

다음 코드에 추가하면 작동합니다.

문제는 아이폰이 클릭 이벤트를 발생시키지 않는다는 것입니다.그들은 "터치" 이벤트를 제기합니다.사과 감사합니다.왜 그들은 다른 사람들처럼 표준을 지킬 수 없었을까요?어쨌든 니코에게 팁을 주셔서 감사합니다.

신용 거래처: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

$(document).ready(function () {
  init();
  $(document).click(function (e) {
    fire(e);
  });
});

function fire(e) { alert('hi'); }

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
       case "touchstart": type = "mousedown"; break;
       case "touchmove":  type = "mousemove"; break;        
       case "touchend":   type = "mouseup"; break;
       default: return;
    }

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                          first.screenX, first.screenY, 
                          first.clientX, first.clientY, false, 
                          false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() 
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
}

iPhone과 iPod에만 적용되므로 크롬이나 파이어폭스에서 모든 것이 파란색으로 변하는 것은 아닙니다.

/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');

기본적으로 iOS에서는 기본적으로 "클릭 가능"하지 않습니다. "터치 가능"(pffff)이므로 포인터 커서를 줌으로써 "클릭 가능"으로 만듭니다. 말이 되죠?

CSSCursor:Pointer; 이것은 훌륭한 해결책입니다.FastClickhttps://github.com/ftlabs/fastclick 은 당신이 원하지 않는다면 CSS를 변경할 필요가 없는 또 다른 솔루션입니다.Cursor:Pointer;어떤 요소에 대해서는 어떤 이유에서.저는 iOS 기기에서 300ms 지연을 제거하기 위해 지금 패스트클릭을 사용합니다.

모바일 iOS에서 클릭 이벤트는 문서 본문에 거품이 생기지 않으므로 .live() 이벤트와 함께 사용할 수 없습니다.만약 당신이 divor 섹션과 같이 네이티브가 아닌 클릭 가능한 요소를 사용해야 한다면 cursor: pointer를 사용하는 것이고, 당신의 css에서는 문제의 요소의 non-hover를 사용합니다.만약 그것이 추하다면 당신은 대표자()를 조사할 수 있습니다.

대신 jQTouch 사용 - its jQuery의 모바일 버전

프로젝트에 이 정보를 포함합니다.github에서 "Readme"를 확인합니다.https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix

언급URL : https://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery