Question

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

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

有没有一种好方法可以确保它只触发一次？

我主要在这里谈论各种移动浏览器。

Answer 1

您可以尝试.one()事件处理程序而不是.on() http://api.jquery.com/one/

Answer 2

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

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

Answer 3

用这个开始你的功能：

var now = new Date().getTime();
if( arguments.callee.lastcalled > now-250) return false;
arguments.callee.lastcalled = now;

这样做是限制每250毫秒调用一次以上的函数（这通常就足够了，不会有丢失实际重复的风险）

事件触发多次

3 个答案: