使用 javascript 打开一个新的 window（google 地图），删除以前的事件处理程序

Question

我正在尝试使用地理定位。我正在使用 HTML 和 javascript 来做到这一点。我想要做的是在获取用户位置后，它将打开一个新选项卡，该选项卡将转到显示方向的 google 地图。起点是用户的位置，终点已经给定。我在 google 地图 URL 中使用了 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 LocationProvided 是我的终点地址。我手动编码它。

<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>

我的问题是，当我第一次点击它时，它会打开一个 window，当我再次点击它时，它会打开两个显示位置的 window。我很困惑为什么我第二次点击它时它会同时打开两个windows？

Answer 1

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

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

The .off() method removes event handlers that were attached with .on().

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

示例：

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

注意不要删除 myElem

的其他插件的现有处理程序

Answer 2

问题是您同时通过 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>

Answer 3

发现我的错误

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

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

我输入了同名值。

使用 javascript 打开一个新的 window（google 地图），删除以前的事件处理程序

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

javascript

jquery

jquery-events