解决方案（不完美）

Question

我有一个地图按钮，您可以单击（或点按）以显示带有嵌入式Google地图的模式。它在不同浏览器的桌面上应该有效，但在iPhone（可能还有其他触摸屏）上，我必须点按两次按钮。

编辑：尝试使用＆＃34; ontouchend＆＃34;触发和＆＃34; touchend＆＃34;关闭模态。现在模态一打开就会关闭。

HTML：

<div class="map-modal" id="map-modal">
    <div class="map-container">
        <div class="the-map" id="map-canvas"></div>
        <div class="hide-btn hide-btn--map" onclick="closeModal();"><span class="close hairline"></span><div class="hidden-content">Hide the map</div></div>
    </div>
</div>

按钮：

<div class="button button--map" onmousedown="calcRoute('<?php echo $location[address1]; ?>', '<?php echo $location[address2]; ?>');">Map</div>

JavaScript：

function calcRoute(start, end) {
    var e = document.getElementById("map-modal");
    e.style.display = 'block';
    $("body").addClass("modal-open");
    google.maps.event.trigger(map, 'resize');
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.TravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            alert("Sorry, no walking route can be found between these locations");
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

听起来像touchstart和mousedown都在开火。此线程有一些选项可用于在移动设置中抑制mousedown事件。 onclick and ontouchstart simultaneously

Answer 2

解决方案（不完美）

解决方案已更新，请参见下文。

捕获＆＃34;秒＆＃34;通过触发事件发送布尔变量来触摸。对于ontouchstart set touching = true，对于onclick set touching = false。然后在模态关闭功能中检查是否有触摸事件，并重置触摸的变量。

~~这不是一个优雅的解决方案。如果Google地图徽标恰好是用户触摸屏幕以打开地图的位置，则会将其注册为额外触摸，并打开Google地图应用程序。~~

解决方案是防止事件冒泡DOM树（从未听说过在我之前冒泡的事件）。谷歌搜索this找到了正确的方向。这很简单。只需在事件触发器上使用this.stopPropagation();即可。

我在这篇文章中保留了以前的解决方案，以显示我尝试过的内容，也许是男性更容易理解事件传播（或者＃34;事件冒泡＆＃34;）在这样的情况下是如何工作的。

如果有人有更优雅的解决方案，请随时分享。

触发事件按钮

<div class="button button--map right"
    ontouchstart="this.stopPropagation(); calcRoute('Citybox+Oslo,+Prinsens+gate+6,+0152+Oslo,+Norway', '<?php echo $location[address]; ?>');"
    onclick="calcRoute('Citybox+Oslo,+Prinsens+gate+6,+0152+Oslo,+Norway', '<?php echo $location[address]; ?>');"
    >Map</div>

按钮在iPhone（以及可能的其他触摸屏）上无法正常工作

2 个答案:

解决方案（不完美）

触发事件按钮