jQuery 移动按钮单击处理程序触发两次？

Question

这是代码...简单(目前全局定义的变量)。第一次单击它按预期工作...但是第二次会导致事件连续触发两次，这就是我现在想要的...有什么想法吗？？？

$(document).on("vclick", "#timer", function() {

  console.log(past_ts);
  if(past_ts === 0) {
    past_ts = new Date().getTime();
    $(this).text("Stop Set Timer");
  }
  else {
    curr_ts = new Date().getTime();
    diff_ts = ((curr_ts - past_ts) / 1000);

    past_ts = 0; // Reset timer

    $(this).text("Start Set Timer");

  }
});

Answer 1

简单。我可以通过两种方法解决这个问题。

1) 在打开函数之后使用e.stopImmediatePropagation()(第二行)。请务必传递事件参数。

$(document).on("vclick", "#timer", function(e) {
                                      //    ^ note this param
  e.stopImmediatePropagation();

  console.log(past_ts);
  if(past_ts === 0) {
    past_ts = new Date().getTime();
    $(this).text("Stop Set Timer");
  }
  else {
    curr_ts = new Date().getTime();
    diff_ts = ((curr_ts - past_ts) / 1000);

    past_ts = 0; // Reset timer

    $(this).text("Start Set Timer");

  }
});

可以在此处找到文档: http://api.jquery.com/event.stopimmediatepropagation/

或者

2) 尝试使用off().on()技术。这确保了如果您已经绑定(bind)了该行为，它将取消绑定(bind)，然后重新绑定(bind)。

$(document).off("vclick", "#timer").on("vclick", "#timer", function() {

  console.log(past_ts);
  if(past_ts === 0) {
    past_ts = new Date().getTime();
    $(this).text("Stop Set Timer");
  }
  else {
    curr_ts = new Date().getTime();
    diff_ts = ((curr_ts - past_ts) / 1000);

    past_ts = 0; // Reset timer

    $(this).text("Start Set Timer");

  }
});