如何在调用另一个事件处理程序时禁用另一个事件处理程序

How to disable an eventhandler when another is getting called

本文关键字：程序 事件处理 另一个 调用      更新时间：2023-09-26

我在一个输入字段上有两个事件侦听器。一个在更改时被调用，一个当您单击来自 google 的自动完成下拉列表时调用。我的问题是，当您单击这样的自动完成时，两个处理程序都会被调用并向谷歌 API 发出请求。

我试图绑定 onchange 事件并在谷歌自动完成 ajax 调用被触发时取消绑定它，但首先执行 onchange 事件。所以它不会被解绑。那么，是否有可能检测用户是手动还是通过自动进行输入？我想仅在用户手动输入并且不使用自动完成下拉列表时才执行"请求位置"功能。我尝试使用其他一些事件处理程序，如"focus-out"，但没有成功。

此行使绑定：

autoCompleteInput.on "change", requestlocation

这是被调用的函数：

requestlocation = () ->
  address = autoCompleteInput.val()
  geocoder = new google.maps.Geocoder()
  geocoder.geocode
    address: address, (results, status) ->
      if status is google.maps.GeocoderStatus.OK
        if results[0].address_components.length > 1
          city = results[0].address_components[0].long_name
          country = results[0].address_components[results[0].address_components.length-1].long_name
          setHiddenFields results[0].geometry.location.lat(), results[0].geometry.location.lng(), city, country 
          autoCompleteInput.val(city+", "+country)
        else
          city = null
          country = results[0].address_components[0].long_name
          setHiddenFields results[0].geometry.location.lat(), results[0].geometry.location.lng(), city, country
          autoCompleteInput.val(country)
        setMarker new google.maps.LatLng(latInput.val(), lngInput.val())
      else
        console.log "Geocode was not successful for the following reason: " + status

这是自动完成处理程序发出请求的代码：

google.maps.event.addListener autocomplete, 'place_changed', ->
  autoCompleteInput.off "change", requestlocation
  place = autocomplete.getPlace()
  if !!place.geometry
    autoCompleteInput.attr "data-valid", "true"
    setMarker place.geometry.location
    address = place.address_components
    if address.length > 1
      setHiddenFields place.geometry.location.lat(), place.geometry.location.lng(), address[0].long_name, address[address.length-1].long_name
    else
      setHiddenFields place.geometry.location.lat(), place.geometry.location.lng(), null, address[0].long_name
  else
    autoCompleteInput.attr "data-valid", "false"
  autoCompleteInput.on "change", requestlocation

感谢您的任何回答！

第一种方法：侦听 keyup 事件而不是 change ，确定处理程序中的按键类型（过滤掉箭头键、Tab 键和返回键），并且仅在发生适当更改时才调用requestlocation。可能不起作用，因为文本可以粘贴到不会触发任何关键事件的输入字段中。

接下来尝试：使用一个小的超时，并在自动完成事件触发时停止它。

autocomplete.on "change", ->
  # stop previous timeouts
  clearTimeout autocomplete.data('timeout')
  # start a new timeout and store reference
  timeout = setTimeout requestlocation, 100
  autocomplete.data timeout: timeout

在自动完成处理程序中，您应该终止运行超时并执行调用：

google.maps.event.addListener autocomplete, 'place_changed', ->
  # stop any running timeout
  clearTimeout autocomplete.data('timeout')
  # perform your autocompletion calls
  place = autocomplete.getPlace()
  ...

这还可以防止在快速触发多个change事件时进行多次调用。您可能需要将超时（此处：100ms）调整为合适的值。

我不知道

"requestlocation"是什么样子的。但是如何检查更改事件的不同事件属性。（event.target/event.currentTarget）我现在无法测试它，但也许您会发现有所不同。只是一个想法

function requestlocation(event) {
  console.log(event.target, event.currentTarget);
}
var timeout;
autoCompleteInput.on("input", function() {
  clearTimeout(timeout);
  timeout = setTimeout(requestlocation, 100);
});
对不起，普通的

javascript，但我不喜欢咖啡脚本：/

相关文章：