使用 JavaScript 打开一个新窗口(谷歌地图），删除以前的事件处理程序

Opening a new window (google maps) using javascript, remove previous event handler

本文关键字：删除 谷歌地图 程序 事件处理 窗口 新窗口 JavaScript 使用 一个      更新时间：2023-09-26

我正在尝试使用地理位置。我正在使用HTML和javascript来做到这一点。我想做的是在获得用户的位置后，它将打开一个新选项卡，该选项卡将转到显示方向的谷歌地图。起点是用户的位置，终点已经给出。我在谷歌地图网址中使用了saddr和daddr。我正在使用 Chrome 浏览器进行测试，并且我已经允许获取我的位置。

这是我的代码

对于 HTML

 <span class="glyphicon glyphicon-road" id="getdir1" onclick="getLocation()" style="font-size:15px;"> Get Direction1</span>
 <span class="glyphicon glyphicon-road" id="getdir2" onclick="getLocation()" style="font-size:15px;"> Get Direction2</span>
 <span class="glyphicon glyphicon-road" id="getdir3" onclick="getLocation()" style="font-size:15px;"> Get Direction3</span>
<p id="geo-error"></p>

这是我的JavaScript位置提供是我的终点的地址。我手动编码了它。

<script>
    var x = document.getElementById("geo-error");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
    function showPosition(position) {
        var latlon = position.coords.latitude + "," + position.coords.longitude;
        $("#getdir1").click() = function(){ 
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided1");
        }
        $("#getdir2").click(function(){
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided2");
        });
        $("#getdir3").click(function(){
            window.open('http://maps.google.com/maps?saddr='+latlon+"&daddr=LocationProvided3");
        });
    }
    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                x.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                x.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                x.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                x.innerHTML = "An unknown error occurred."
                break;
        }
    }
</script>
我的问题是当我第一次单击它时，

它将打开一个窗口，当我再次单击它时，它将打开两个显示位置的窗口。我很困惑为什么当我第二次单击它时它会同时打开两个窗口？

您可以使用 Jquery off 取消以前的处理程序。

http://api.jquery.com/off/

.off（） 方法删除附加了 .on（）.

我经常使用它来避免由于多个函数调用一次又一次地附加同一个处理程序而导致堆叠处理程序的问题。

例：

$(myElem).off("click").on("click", function (evt) {...});

注意不要删除其他插件的现有处理程序myElem

问题是你通过onclick和$（'element'）.click（）绑定点击事件

我已经修改了您的代码，例如通过将元素传递给函数来简化业务，您甚至不需要jQuery。请检查并让我知道

var x = document.getElementById("geo-error");
function getLocation(address) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) { //call back success
      var latlon = position.coords.latitude + "," + position.coords.longitude;
      window.open('http://maps.google.com/maps?saddr=' + latlon + '&daddr=' + address)
    }, function(error) { //call back error
      switch (error.code) {
        case error.PERMISSION_DENIED:
          x.innerHTML = "User denied the request for Geolocation."
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML = "Location information is unavailable."
          break;
        case error.TIMEOUT:
          x.innerHTML = "The request to get user location timed out."
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML = "An unknown error occurred."
          break;
      }
    });
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
 <span class="glyphicon glyphicon-road" id="getdir1" onclick="getLocation('LocationProvided1')" style="font-size:15px;"> Get Direction1</span>
<span class="glyphicon glyphicon-road" id="getdir2" onclick="getLocation('LocationProvided2')" style="font-size:15px;"> Get Direction2</span>
<span class="glyphicon glyphicon-road" id="getdir3" onclick="getLocation('LocationProvided3')" style="font-size:15px;"> Get Direction3</span>
<p id="geo-error"></p>

发现了我的错误

我添加了.off（'click'），就像@Christophe Roussy所说的那样，在我的window.open()中也应该有一个名称参数。

window.open(url, name)每次我调用 URL 时，它都会转到我输入的名称。由于我放置了一个 NAME 参数，它将覆盖它打开的窗口的 URL。

我输入相同的名称值。

相关文章：