Question

我一直致力于为各种触摸屏设备开发网页，其中一个最一致的问题是如何处理触摸事件。

即使多个（大致）同步事件调用它，有没有一种方法只调用一次函数？

e.g。

$("body").on("mousedown touchstart MSPointerDown", function () {
    alert("This message will appear multiple times on some devices.");    
})

我已经考虑过使用超时，所以这个函数只能每200毫秒调用一次或类似的东西（在我的头顶和未经测试）：

var allowed = true;
$("body").on("mousedown touchstart MSPointerDown", function () {
    if(allowed){
        allowed = false;
        alert("This message will hopefully only appear once!");
        setTimeout(function () { allowed = true }, 200);
    }
})

（对于这个问题，我不是在寻找插件建议，我知道有很多触摸事件插件）

是否有正确/更好的方式将多个事件用作单个函数的可能触发器？我可以在不打破其他用途的情况下以某种方式对事件进行别名吗？

Answer 1

实际上，您希望只接受通过的第一个类型事件并忽略所有其他事件。这仍然会触发未来的点击/触摸。输入closures。

$(document).ready(function() {
  function alertClosure() {
    var eventType = null;

    function doAlert(e) {
      if (!eventType) {
        eventType = e.type; // only the first eventType we get will be registered
      }

      if (e.type == eventType) {
        alert("This message will hopefully only appear once!: " + e.type);
      }
    }

    return doAlert;
  }

  $("body").on( "mousedown touchstart MSPointerDown", alertClosure() );
});

http://plnkr.co/edit/oz48d3

Answer 2

你可以使用$ .one（而不是$ .on）

此处：$.one documentation on jquery.com

如果您希望随后调用它，那么您可以在超时时重新绑定处理程序，如下所示：

function handler(){
var called = false;
return function(ev){
    if(!called){
        called = true;
        $("ul#messages").append($("<li>").text("event"));
        setTimeout(bind, 1000); // rebind after a suitable pause
    }
}
}

function bind(){
    $("ul#messages").one("click", new handler())        
};

$(function(){
    bind();
});

https://jsfiddle.net/p3t6xo48/5/

这允许每个绑定的处理程序一次运行一次，对于多个事件只运行一次，然后在适当的暂停后反弹。

从多个事件中调用一次函数

2 个答案: