document .touch device에 대한 클릭 기능

document .touch device에 대한 클릭 기능

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

문서 클릭에 대한 암호화된 설정은 다음과 같습니다.

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

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

});

document.click이 터치 장치에서 작동하지 않을 수 있으며, 작동하지 않을 경우 동일한 효과를 얻을 수 있는 해결 방법은 무엇입니까?

감사해요.

를 가 없습니다! .touchstart아니면touchend로:click충분할 것입니다.

이 이전 답변은 탭이 특별하다고 생각하는 브라우저에서 한동안 작동했습니다.여기에는 원래 표준화되지 않은 "터치" 이벤트가 포함되어 있었습니다.

문제가 있는 경우를 제외하고는:

$(document).on('click', function () { ... });

아무것도 바꿀 필요가 없습니다!

를) 된 이전 , touch...

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

$(document).click( function () {

대상:

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

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

아이폰 터치 events 인 jav 스크립트

터치 데모

이 스레드에서 더 많은 정보

모든 곳에 바르는 것은 다음과 같은 것을 할 수 있습니다.

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

을 사용하여'click touchstart'원하는 결과를 얻을 것입니다.네가 만약console.log(e)하지만 당신의 클릭은 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가 포함되어 있지 않습니다.

행:

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

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