Question

我有一个定义点击事件的按钮。在该事件内部，我还定义了其他一些元素的事件。

因此，我在一个事件侦听器中有2-3个嵌套的事件侦听器。我的问题是如何在内部侦听器内部删除外部侦听器。

我用'*******************************'标记了这些行

function placeAndInitMarkerAtPosition(position) {
  var marker = new google.maps.Marker({
    position: position,
    map: map,
  });

  isStillEditing = false;

  google.maps.event.addListener(marker, 'click', function(e) {
    if (isStillEditing == true) {
      console.log('You are already editing!');
      return;
    }

    isStillEditing = true;

    var oldLat = marker.position.lat();
    var oldLng = marker.position.lng();
    editMarkerModalLatInput.value = oldLat;
    editMarkerModalLngInput.value = oldLng;
    displayModal('editMarkerModal');

    document.getElementById('editMarkerModalCloseBtn').addEventListener('click', function(e) {
      hideModals();
      if (marker.position.lat() == oldLat && marker.position.lng() == oldLng) {
        console.log('nothing changed');
      } else {
        marker.setPosition({
          lat: oldLat,
          lng: oldLng
        });
        marker.setAnimation(null);
        marker.setDraggable(false);
      }
      isStillEditing = false;
*************************editMarkerModalChoosePositionBtn.onclick = null;
    });

    editMarkerModalChoosePositionBtn.addEventListener('click', function onChoosePositionBtnClicked(e) {
      hideModals();
      marker.setAnimation(google.maps.Animation.BOUNCE);
      marker.setDraggable(true);

      editOkBtn.addEventListener('click', function(e) {
        marker.setDraggable(false);
        marker.setAnimation(null);
        editMarkerModalLatInput.value = marker.position.lat();
        editMarkerModalLngInput.value = marker.position.lng();
        displayModal('editMarkerModal');
        isStillEditing = false;
      }, {
        once: true
      });

      editCancelBtn.addEventListener('click', function(e) {
        hideModals();
        marker.setPosition({
          lat: oldLat,
          lng: oldLng
        });
        marker.setAnimation(null);
        marker.setDraggable(false);
        isStillEditing = false;
**************editMarkerModalUpdateBtn.removeEventListener('click', onChoosePositionBtnClicked);
      }, {
        once: true
      });
    });

    editMarkerModalUpdateBtn.addEventListener('click', function(e) {
      if (marker.position.lat() == oldLat && marker.position.lng() == oldLng) {
        console.log('nichts geändert');
      }
      hideModals();
      isStillEditing = false;
    });

  });

  markers.push(marker);
  map.panTo(marker.position);
}

Answer 1

由于您为处理程序函数指定的名称仅限于该函数内部，因此其他处理程序将无法访问它。

因此，您应该在函数中定义一个名称，该名称在所有需要访问它的代码的本地作用域内。

您应该举一个简化的示例，在您发布问题时完全代表问题。我将给出一个简化的代码答案，并希望如果您的代码在此处表示，请快速浏览一下。

outerElement.addEventListener("some_event", function() {
    var innerElementA = document.getElementById("elementA");
    var innerElementB = document.getElementById("elementB");

    innerElementA.addEventListener("some_event", handlerA);
    innerElementB.addEventListener("some_event", handlerB);

    function handlerA(event) {
       // some code
    }
    function handlerB(event) {
       // some code

       // remove the other listener
       innerElementA.removeEventListener("some_event", handlerA);
    }
})

在另一个监听器中删除监听器

1 个答案: