javascript - 按钮在 iPhone(可能还有其他触摸屏)上无法正常工作

Question

我有一个 map 按钮，您单击(或点击)即可显示带有嵌入式 Google map 的模式。它的工作方式就像在不同浏览器中的桌面上一样，但在 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