javascript - 事件多次触发

Question

$("input[type='color']").on("change blur", function() {
    alert("changed");
});

这也适用于其他元素，但这是一个很好的例子。在某些浏览器上使用颜色输入类型时，它会在“更改”时触发，但不会在“模糊”时触发，在某些浏览器中会在“模糊”时触发，但不会在“更改”时触发，而在某些浏览器中，它会在两者上触发。

有没有好的方法保证只触发一次？

我这里主要说的是各种手机浏览器。

Answer 1

我编写了 .one() 的专用版本，它将在处理完第一个事件后重新绑定(bind)事件处理程序。它在包装器中执行此操作，因此不必更改事件处理程序代码本身。

$.fn.one_rebind = function(events, listener) {
  return this.one(events, function fn() {
    var $self = $(this).unbind(events);

    listener.apply(this, arguments);

    setTimeout(function() {
      $self.one(events, fn);
    }, 0);
  });
};

$('input[type=color]').one_rebind('change blur', function(evt) {
  document.getElementById('debug').innerText += ' ' + evt.type;
});

虽然经过测试，但您的里程可能会有所不同 :)

Demo