點擊事件仍然觸發div

Question

這是一個PhoneGap應用程序，我正在測試我的筆記本電腦，然後在iPhone上使用PhoneGap cli進行測試。我有一個openlayers 3地圖，它記錄了點擊事件。菜單顯示時，我也有一個div來掩蓋整個地圖。這個想法是，當這個蒙版div被點擊/點擊時，它隱藏自身，但下面的地圖不會註冊點擊事件。發生的事情是，地圖IS正在註冊點擊事件，因此掩蔽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. 鼠標移動
6. 鼠標按下
7. 鼠標鬆開
8. 點擊

因此，如果您沒有在任何touch事件中調用event.preventDefault()事件，則您的移動瀏覽器會假設您希望它繼續通過該事件鏈，直到它觸發click事件（正是這個事件會給您提供問題的click）。

由於調用event.stopPropagation()阻止事件冒泡事件鏈 - 這是人們自然會認爲正在發生的事情，因此可能會引起混淆。但是您應該始終記住在觸摸事件處理程序中使用preventDefault（），因此不會發生默認的鼠標仿真處理。

有關更深入的說明，請參閱read this。

可能相關：link