2013-04-15 4 views
1

내 웹 사이트가 반응적이고 좁은보기의 경우 네비게이션이 클릭하여 탐색을 표시하는 아이콘으로 전환합니다. 탐색 패널을 닫으려면 아이콘을 다시 클릭하거나 탐색 모달 바깥 쪽을 클릭합니다. 당신이이 탐색 모달를 닫 아이콘을 탭,하지만 때 탐색 모달 아무것도 외부를 눌러 때 모바일 기기에외부 터치 이벤트에서 nav 모드 닫기를 닫습니다.

$(document).mousedown(function(e) { 
    var clicked = $(e.target); 
    if (clicked.is("#navigation") || clicked.parents().is("#navigation") || clicked.is("#hamburger-nav-link")) { 
     return; 
    } else { 
     $("#hamburger-nav-link").removeClass("hamburger-nav-active"); 
     $("#navigation").removeClass("mobile-nav"); 
    } 
}); 

(물론, 내 아이폰) 발생 :이이 탐색 모달 외부 클릭을 관리 할 수있는 JS입니다 .

나는 이벤트를 클릭하여 터치 이벤트를 매핑이 SO 질문에서 코드를 실행하려고 : JavaScript mapping touch events to mouse events

그러나이 나를 위해 작동하지 않았다.

코드 아래에 $(document).mousedown() 코드를 붙여 넣었습니다.이 코드는 모두 일반 jQuery 함수 내에 있습니다. 모든 것을 볼 수 있도록 아래 코드를 붙여 넣었습니다. 이 파일은 닫는 태그 앞에있는 모든 페이지의 끝에서 호출됩니다.

도움을 주시면 감사하겠습니다.

$ (함수() {

// Mobile nav 
$("#hamburger-nav-link").click(function() { 
    if ($("#navigation").hasClass("mobile-nav")) { 
     $(this).removeClass("hamburger-nav-active"); 
     $("#navigation").removeClass("mobile-nav"); 
    } 
    else { 
     $(this).addClass("hamburger-nav-active"); 
     $("#navigation").addClass("mobile-nav"); 
    } 

    return false; 
}); 

// Close modal if click event is outside of it 
$(document).mousedown(function(e) { 
    var clicked = $(e.target); 
    if (clicked.is("#navigation") || clicked.parents().is("#navigation") || clicked.is("#hamburger-nav-link")) { 
     return; 
    } else { 
     $("#hamburger-nav-link").removeClass("hamburger-nav-active"); 
     $("#navigation").removeClass("mobile-nav"); 
    } 
}); 

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);   
} 

}); 

답변

1

가있어 단순히 click 및 touchend 이벤트를 문서에 바인딩하여 작업 할 수 있습니다. 아이콘을 클릭하면 원래 숨기기/표시 기능을 참조합니다. 그러나 아이콘을 클릭 할 때 가끔 두 번 불이 붙고 이상한 행동을하게되는 또 다른 문제가 발생했습니다. 닫고 다시 여는 것. 나는 이것을 별도로 다룰 예정이다.

두 가지 기능은 다음과 touchHandler(event)init()$(document).mousedown(function(e) { ... }); 기능과 $("#hamburger-nav-link").click(function() { ... }); 기능을 대체 : 대답에 대한

var navModalView = function() { 
    if ($("#navigation").hasClass("mobile-nav")) { 
     $("#hamburger-nav-link").removeClass("hamburger-nav-active"); 
     $("#navigation").removeClass("mobile-nav"); 
    } 
    else { 
     $("#hamburger-nav-link").addClass("hamburger-nav-active"); 
     $("#navigation").addClass("mobile-nav"); 
    } 

    return false; 
} 

$(document).bind("click touchend", function(e) { 
    var targetEl = $(e.target); 

    if (targetEl.is("#navigation") || targetEl.parents().is("#navigation")) { 
     return; 
    } 
    else if (targetEl.is("#hamburger-nav-link")) { 
     navModalView(); 
     event.preventDefault(); 
    } 
    else { 
     $("#hamburger-nav-link").removeClass("hamburger-nav-active"); 
     $("#navigation").removeClass("mobile-nav"); 
    } 
}); 
0

내 웹 프로젝트를 위해 이것을 사용하고 있습니다. 이 모바일을 위해 작동 할 수 있습니다. 한 번 시도 :

//GET ALL CLICK EVENT 
$('html').click(function() { 
    popmenu(); 
}); 

//Popupmenu Hide Function   
function popmenu(){ 
    var popmenuVisible = $(".popmenuclass").is("visible").toString(); 
    if (popmenuVisible=="true") { 
      $(".popmenuclass").hide(); 
     } 
} 

//IF you click on popupmenu then disable popmenu closing 
$(".popmenuclass").click(function(event){ event.stopPropagation();}); 
+0

감사하지만 내가 터치 이벤트를 결합하려고했다, 그래서, 여기에 대한 대답이다. 위의 내 대답을 볼 수 있습니다. –

관련 문제