터치 장치 용 문서 .click 기능

터치 장치 용 문서 .click 기능

---

jquery를 사용하여 작동하는 하위 탐색이 있습니다. 사용자가 최상위 목록 항목 (예 : 드롭 다운을 트리거하는 '서비스')을 클릭합니다. 드롭 다운은 '서비스'링크를 클릭하여 전환됩니다. 사용자가 화면의 아무 곳이나 클릭하여 드롭 다운을 닫힌 상태로 전환 할 수 있도록 만들었습니다. 그러나 사이트가 반응 형이므로 사용자가 화면의 아무 곳이나 클릭 (터치)하여 드롭 다운을 닫을 수 있기를 원하지만 내 문제는 터치 장치에서 작동하지 않는다는 것입니다.

문서 클릭에 대한 내 코드 ive 설정은 다음과 같습니다.

$(document).click(function(event) { 

  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }

});

document.click이 터치 장치에서 작동하지 않을 수 있다고 가정하고 있습니다. 그렇지 않은 경우 동일한 효과를 얻기위한 해결 방법은 무엇입니까?

감사

---

클릭 또는 터치로 기능을 트리거하려면 다음을 변경할 수 있습니다.

$(document).click( function () {

이에:

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

아니면 이거:

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

touchstart곧 요소가 터치뿐만 이벤트가 발생는 touch이벤트가 많은, 즉 표면의 단일 접점에 "탭"과 같다. 자신에게 가장 적합한 것이 무엇인지 확인하기 위해 각 항목을 실제로 시도해야합니다. 일부 장치에서는 touch트리거하기가 조금 더 어려울 수 있습니다 (좋은 것일 수도 있고 나쁜 것일 수도 있습니다-드래그가 계산되는 것을 방지하지만 우발적 인 작은 드래그로 인해 발사되지 않을 수 있음).

---

touchstart 또는 touchend는 좋지 않습니다. 페이지를 스크롤하면 장치가 작업을 수행하기 때문입니다. 따라서 요소 외부를 탭하거나 클릭하여 창을 닫고 창을 스크롤하려면 다음을 수행했습니다.

$(document).on('touchstart', function() {
    documentClick = true;
});
$(document).on('touchmove', function() {
    documentClick = false;
});
$(document).on('click touchend', function(event) {
    if (event.type == "click") documentClick = true;
    if (documentClick){
        doStuff();
    }
 });

---

jqTouch 또는 jquery mobile 을 사용할 수 있습니까? 터치 이벤트를 처리하는 것이 훨씬 쉽습니다. 그렇지 않은 경우 클릭 터치 장치를 시뮬레이션해야하는 경우 다음 문서를 따르십시오.

자바 스크립트에서 아이폰 터치 이벤트

터치 데모

이 스레드에서 더보기

---

모든 곳에 적용하려면 다음과 같이 할 수 있습니다.

$('body').on('click', function() {
   if($('.children').is(':visible')) {
      $('ul.children').slideUp('slow');
   }
});

---

위에서 언급했듯이 사용 'click touchstart'하면 원하는 결과를 얻을 수 있습니다. 당신이 경우 console.log(e)당신은 클릭하고 touchstart에서이 작업을 얻을 것이다 - 클릭 수 있지만, 당신은 JQuery와 클릭으로 터치를 인식하면 찾을 수 있습니다. 솔루션은 나를 위해 일했습니다.

//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
    deviceEventType = 'click'
}

$(document).on(specialEventType, function(e){
    //code here
});

---

승인 된 답변에는 클릭이 구현 된 경우 터치 스타트가 클릭을 호출하지 못하도록하는 필수 반환 false가 포함되어 있지 않아 핸들러 twoce가 실행됩니다.

하다:

$(btn).on('click touchstart', e => { 
   your code ...
   return false; 
});

참고 URL : https://stackoverflow.com/questions/11397028/document-click-function-for-touch-device