Javascript 单击仍在div下触发的事件

这是我正在构建的PhoneGap应用程序，我正在笔记本电脑上测试，然后在iphone上使用PhoneGap cli进行测试。我有一个openlayers 3地图，记录点击事件。我还有一个div，当菜单显示时，它会屏蔽整个地图。其思想是，当单击/点击此掩蔽div时，它会隐藏自己，但下面的映射不会注册单击事件。发生的情况是，映射正在注册click事件，因此掩蔽div被隐藏，但映射随后会执行其他操作，因为它已被单击，但它不应该这样做

我已经把代码简化到了细节。下面是两张屏幕截图，分别显示了Wide和with菜单以及masking div。右下角的按钮是打开菜单的按钮（

.layers\u menu\u button

）

这会侦听屏蔽div（

#net_curtain2

）上的单击/点击，然后将其隐藏（注意，注释掉的传播内容是我试图在此处停止单击/点击事件，但没有任何区别）<代码>交互类型定义为

单击

或

触摸端

，具体取决于我测试的内容

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

因此，如果在菜单未显示时单击地图，控制台将注销“net窗帘隐藏”，这是正确的。但是，如果打开菜单，然后单击蒙版div（网帘），它会关闭菜单并隐藏网帘，这是正确的，但随后它会触发“网帘隐藏”，这是错误的！我需要它只是在隐藏网帘时停止

---

最令人沮丧的是，它可以在我的笔记本电脑上工作，但不能在手机上工作。将

map.on（'click'…

更改为

map.on（交互类型…

意味着它不会触发地图上的任何单击/点击事件。我感到困惑。

您的移动浏览器正试图模拟我相信的单击事件

调用

event.preventDefault（）；

应该可以解决您的问题

请尝试以下代码：

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

说明：

我相信你的问题在于移动浏览器模拟点击事件的方式。在为移动浏览器开发时，有一件事要永远记住，如果没有任何东西明确阻止默认操作，它们会尝试模拟点击事件。事件顺序如下：

触控启动

触动

接触端

鼠标盖

鼠标移动

穆斯敦

鼠标

点击

因此，在任何

touch

事件中，通过不调用

event.preventDefault（）

，您的移动浏览器假定您希望它继续通过该事件链，直到它触发

单击事件（正是这个
单击事件给您带来问题）

这可能会令人困惑，因为调用
event.stopPropagation（）
会阻止事件从事件链中冒泡出来，这是人们自然会认为正在发生的事情。但您应该始终记住在触摸事件处理程序中使用preventDefault（），这样就不会出现默认的鼠标模拟处理

要获得更深入的解释

可能相关：
未读取，似乎事件气泡错误可能是
event.stopPropogation（）；
我已尝试event.stopPropogation和event.stoppimediatepropagation（见代码中的注释），但都未停止。您是否尝试过
event.preventDefault（）
？否则您会遇到CSS问题，一个div位于另一个div之上（
z-index
）@Cᴀʟʟᴏᴅᴀᴄɪᴛ谢谢！这很有效，在
hide_layers_menu（）；
（我的代码片段的第4行）之前添加它。你能将此作为答案发布，我会接受它吗？尽管请详细说明为什么这应该有效，因为我不确定它为什么有效！如果这是一个冒泡问题，那么stopPropagation肯定更有意义？谢谢！太棒了！谢谢！