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

Question

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

编辑：尝试使用 "ontouchend" 触发和 "touchend" 关闭模态。现在模式一打开就关闭。

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

解决方案（不完美）

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

通过发送带有触发事件的布尔变量捕获了 "second" 触摸。对于ontouchstart 设置touched=true，对于onclick 设置touched=false。然后在模态关闭函数中检查是否有触摸事件，并重置触摸变量。

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

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

我在这个 post 中保留了之前的解决方案，以展示我尝试过的方法，也许男性更容易理解事件传播（或 "event bubbling"）在这种情况下是如何工作的。

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

触发事件按钮

<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（可能还有其他触摸屏）上无法正常工作

Button not working properly on iPhone (and possibly other touch screens)

javascript

iphone

touchscreen

解决方案（不完美）

触发事件按钮