div 下面仍然触发 click 事件

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

我已经将代码简化到了实质内容。这是没有和有菜单和遮罩 div 显示的两个屏幕截图。右下角的按钮是打开菜单的按钮（.layers_menu_button).

这会侦听屏蔽 div 上的点击/点击（#net_curtain2），然后隐藏它（请注意，注释掉的传播是我尝试在此处停止单击/点击事件，但它没有任何区别）。interaction_type定义为click or 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'... to map.on(interaction_type...意味着它不会触发地图上的任何点击/点击事件。我很困惑。

我相信您的移动浏览器正在尝试模拟点击事件。

Calling event.preventDefault();应该可以解决你的问题。

尝试一下代码：

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

解释：

我相信您的问题是移动浏览器模拟点击事件的方式。为移动浏览器开发时要始终记住的一件事是如果没有明确阻止默认操作，则尝试模拟单击事件。事件的顺序是这样的：

1. 触摸启动
2. 触摸移动
3. touchend
4. 鼠标移到
5. 鼠标移动
6. 鼠标按下
7. mouseup
8. click

所以，通过不打电话event.preventDefault() in any touch您的移动浏览器假设您希望它继续通过该事件链，直到它触发一个事件click事件（就是这个click给您带来问题的事件）。

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

如需更深入的解释，读这个 http://www.html5rocks.com/en/mobile/touchandmouse/.

可能相关：link https://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault