启动第二个.click函数

firing the second .click function

本文关键字：函数 click 第二个 启动      更新时间：2023-09-26

我认为这是一个非常新手的问题，但有可能在第一次和第二次点击时在一个.点击上有两个单独的功能吗？

$(div).click(function(){
    alert("1st click");
},
function(){
    alert("2nd click");
});

http://jsfiddle.net/2xe8a/

或者是否有任何建议将该职能分开？

谢谢大家！

当然，只需在第一次点击时设置一些内容，并在第二次时检查

$('div').click(function(){
    var clicked = $(this).data('clicked');
    if ( clicked ) {
        alert('the rest of the time');
    }else{
        alert('first time');
    }
    $(this).data('clicked', !clicked);
});

FIDDLE

一种方法是在第一次点击时解除绑定：

function click1 () {
    alert('1st click');
    $(this).off('click', click1).on('click', click2);
}
function click2 () {
    alert('2nd click');
}
$(function () {
    $('#click').on('click', click1);
});

更新的JSFiddle：http://jsfiddle.net/2xe8a/1/

另一种选择是使用包装器方法来确定应该激发哪种方法：

function click1 () {
    alert('1st click');
}
function click2 () {
    alert('2nd click');
}
$(function () {
    $('#click').data('clicks', 0).on('click', function () {
        var $this = $(this),
            clicks = $this.data('clicks') + 1;
        switch (clicks) {
            case 1: click1.call(this); break;
            case 2: click2.call(this); break;
        }
        $this.data('clicks', clicks);
    });
});

更新的JSFiddle：http://jsfiddle.net/2xe8a/6/

编辑：根据Juhana的建议，第三个选项可能看起来像这样：

function click2 () {
    alert('2nd click');
}
$(function () {
    $('#click').one('click', function () {
        alert('1st click');
        $(this).one('click', click2);
    });
});

JSFiddle链接：http://jsfiddle.net/2xe8a/8/

如果每个函数只发生一次，可以使用one而不是on(而且，我总是使用类似on('click')的东西而不是快捷方式click()方法(：

$("#click").one('click', function(){
  alert("1st click");
  $("#click").one('click', function(){
    alert("2nd click");
  });
});

如果您需要更多地控制哪一个触发，可以使用on，然后使用off来解除事件处理程序的绑定：

$("#click").on('click', function(){
  alert("1st click");
  $("#click").off('click');
  $("#click").on('click', function(){
    alert("2nd click");
    $("#click").off('click');
  });
});

如果你想用变量来做，你可以做：

var firstClick = true;
$("#click").on('click', function(){
  if (firstClick) {
     alert("1st click");
     firstClick = false;
  }
  else {
    alert("2nd click");
  }
});

我不确定你到底想做什么。

如果你试图让第二个函数每点击2次(即偶数次点击(执行一次，并在奇数次点击时执行第一个函数，那么为什么不使用计数器呢？

这是一个非常简单的例子，但我认为它说明了原理：

var count = 0;
$("#click").click(function(){
    if (count % 2 === 0) {
        oddNumberOfClicks();
    }
    else {
        evenNumberOfClicks();
    }
    count++;
});
function oddNumberOfClicks() {
    alert('Doing some work for odd');
}
function evenNumberOfClicks() {
    alert('Doing some work for even');
}

http://jsfiddle.net/2xe8a/4/

使用递增变量？

clicks = 0;
$(div).click(function(){
  clicks = clicks +1; // clicks++
  if ( clicks == 1 ) {
    alert("1st click");
  } else if ( clicks == 2 ) {
    alert("2nd click");
  } else {
     //...
  }
});

(function(){
    var count = 0;
    $("#click").click(function(e){
        if(count % 2 == 0){
            count++;
            alert(1);
            // first click
        }else{
            count++;
            alert(2);
            // second click
        }
    });
});

使用count er

FIDDLE

附言：没有jQuery就可以完成这件事。http://youmightnotneedjquery.com/

简单方法：

var t = false;
$("#click").click(
    function(){
        if(!t){
            alert("1st click");
            t = true;
        } else {
            alert("2st click");
        }
      }
);

Fiddle:

http://jsfiddle.net/2xe8a/9/

第二次点击是指双击吗？如果是这样的话，jQuery中有一个双击方法：

$(div).dblclick( function() {
    alert("asdf");
});
相关文章：