클릭 이벤트가 여전히 div 아래에 표시됩니다.

Question

저는 PhoneGap cli를 사용하여 노트북에서 테스트를하고 PhoneGap에서 테스트 중이라는 PhoneGap 응용 프로그램입니다. 거기에 click 이벤트를 기록하는 openlayers 3 맵이 있습니다. 또한 메뉴가 표시 될 때 전체 맵을 마스킹하는 div가 있습니다. 이 마스킹 div가 클릭/도청 될 때 자체가 숨겨 지지만 아래의지도는 클릭 이벤트를 등록하지 않는다는 아이디어입니다. 어떤 일이 일어나고있는지도가 클릭 이벤트를 등록하고 있으므로 마스킹 div가 숨겨져 있지만지도가 클릭되지 않았기 때문에 다른 작업을 수행합니다.

나는 코드를 간결하게 정리했다. 다음은 메뉴가없고 마스크 표시 div가있는 두 개의 스크린 샷입니다. 오른쪽 하단의 버튼은 메뉴를 여는 버튼입니다 (.layers_menu_button).

이 클릭을 수신

은/마스킹 DIV (#net_curtain2)에 탭, 후 주석 전파 것은 여기 클릭/탭 이벤트를 중지하는 나의 시도주의 (을 숨 깁니다하지만, 아무튼 어떤 차이를 만들지는 않습니다). interaction_type은 내가 테스트하고있는 것에 따라 click 또는 touchend으로 정의됩니다.

$(window).on("load", function() { 
    $(document).on(interaction_type, "#net_curtain2", function(event) { 
     // event.stopImmediatePropagation(); 
     hide_layers_menu(); 
    }); 

    setup_map(); 
}); 

... 

function hide_layers_menu() { 
    $('.layers_menu_button').fadeIn("fast", function() { 
     // Animation complete 
    }); 

    // remove hide class, add show class 
    $('.layers_menu_button').removeClass('hide_layers_menu'); 
    $('.layers_menu_button').addClass('show_layers_menu'); 

    $('.layers_menu_content').hide(); 

    $("#net_curtain2").fadeOut("fast", function() { 
     // Animation complete 
    }); 

    var layers_menu_width = parseInt($(window).width()-60); 
    $("#layers_menu").animate({ 
     bottom: "30px", 
     right:"30px", 
     width: "20px", 
     height: "20px" 
     }, 'fast', function() { 
      // Animation complete 
     }); 
} 

function setup_map() { 
    // create view 
    view = new ol.View({ 
      center: ol.proj.transform([0.153733491897583, 52.655333117999774], 'EPSG:4326', 'EPSG:3857'), 
      zoom: 17 
     }); 

    // create layers of map types 
    road = new ol.layer.Tile({ 
       source: new ol.source.BingMaps({ 
        imagerySet: 'Road', 
        key: 'my_key_here', 
        disableZooming: true, 
        maxZoom: 19 
       }) 
      }); 

    map = new ol.Map({ 
     target: $('#map')[0], 
     layers: [ 
      road 
     ], 
     view: view, 
     controls : ol.control.defaults({ 
      attribution:false, 
      zoom:false, 
      rotate: false 
     }) 
    }); 

    // check if net_curtain is visible and only act if NOT 
    map.on('click', function(evt) { 
     if($('#net_curtain2').is(':hidden')) 
     { 
      console.log("net curtain hidden"); 
     } 
     else 
     { 
      console.log("net curtain showing"); 
     } 
    }); 

    var interactions = map.getInteractions().getArray(); 
    var pinchRotateInteraction = interactions.filter(function(interaction) { 
     return interaction instanceof ol.interaction.PinchRotate; 
    })[0]; 
    pinchRotateInteraction.setActive(false); 
} 

그래서 무슨 일이 메뉴 화면이 표시되지 않을지도를 클릭하면 콘솔이 정확한지, '숨겨진 그물 커튼'을 로그 아웃 할 것입니다. 하지만 메뉴를 열고 마스킹 div (넷 커튼)를 클릭하면 메뉴가 닫히고 올바른 넷 커튼이 숨겨집니다. 그렇다면 '넷 커튼 숨김'이 잘못되었습니다! 넷 커튼을 숨기기 만하면 돼.

가장 불편한 점은 내 노트북에서 작동하지만 전화로는 작동하지 않는다는 것입니다. map.on('click'...을 map.on(interaction_type...으로 변경하면지도에서 클릭/탭 이벤트가 발생하지 않습니다. 나는 당황 스럽다.

Answer 1

모바일 브라우저가 내가 생각하는 클릭 이벤트를 에뮬레이션하려고합니다.

event.preventDefault();으로 전화하면 문제를 해결할 수 있습니다.

코드를보십시오 :

$(document).on(interaction_type, "#net_curtain2", function(event) { 
    event.preventDefault(); 
    hide_layers_menu(); 
}); 

설명 :

나는 당신의 문제가 모바일 브라우저가 이벤트를 클릭 에뮬레이트하는 방식 믿습니다. 모바일 브라우저 용으로 개발할 때 항상 기억해야 할 점 중 하나는을 명시 적으로 차단하지 않은 경우 클릭 이벤트를 에뮬레이트하려고 시도하는 것입니다 ().이벤트의 순서는 다음과 같이 진행됩니다

1. touchstart
2. 하는 TouchMove
3. touchend
4. 마우스 오버
5. MouseMove 이벤트
6. mousedown
7. mouseup에
8. 클릭

touch 이벤트에서 event.preventDefault()을 호출하지 않으면 모바일 브라우저는 click 이벤트 (문제가 발생하는 click 이벤트)가 발생할 때까지 해당 이벤트 체인을 통해 계속 진행한다고 가정합니다.

event.stopPropagation()을 호출하면 이벤트 체인이 이벤트 체인을 버블 링하지 못하게되므로 혼란 스러울 수 있습니다. 이는 자연스럽게 일어나는 것으로 가정합니다. 그러나 터치 이벤트 핸들러 내에서 preventDefault()를 사용하는 것을 항상 기억해야하므로 기본 마우스 에뮬레이션 처리가 발생하지 않습니다.

자세한 내용은 read this을 참조하십시오.

아마 관련 : link이