javascript - 单击时禁用/启用 mouseenter 和 mouseleave - jquery

Question

我试过这个：

$('.aaa').mouseenter(function () {
    $(this).css('background', '#aaaaaa');
    $(this).css('border', 'solid 1px red');
});
$('.aaa').mouseleave(function () {
    $(this).css('background','blue');
});
$('#tog').click(function () {
      $('.aaa').off('mouseenter mouseleave').on('mouseenter mouseleave');
});

http://jsfiddle.net/z8KuE/13/

它不起作用 - 只是关闭事件/功能。

此外，如何只切换功能的一部分 - 例如只是$(this).css('background', '#aaaaaa');- 而不是切换整个功能？

编辑： 解决方案 1和解决方案 2。由 Shimon Rachlenko 解决。

Answer 1

您可以使用一些共享变量来标记何时关闭该功能：

var flag = true;
$('.aaa').mouseenter(function () {
    if(flag) { // enable this functionality only when flag is set
        $(this).css('background', '#aaaaaa');
    }
    $(this).css('border', 'solid 1px red');
});
$('.aaa').mouseleave(function () {
    if(!flag) return;
    $(this).css('background','blue');
});
$('#tog').click(function () {
    flag = !flag;
});

Answer 2

就像是

function mouseenterbk() {
    $(this).css('border', 'solid 1px red');
}

function mouseenter() {
    $(this).css('background', '#aaaaaa');
}

function mouseleave() {
    $(this).css('background', 'blue');
}

$('.aaa').on('mouseenter.bk', mouseenterbk).mouseenter(mouseenter).mouseleave(mouseleave);

//this is a very dump implementation of the click toggle
var flag;
$('#tog').click(function () {
    if (flag) {
        $('.aaa').on('mouseenter.bk', mouseenterbk);
        flag = false;
    } else {
        $('.aaa').off('mouseenter.bk');
        flag = true;
    }
});

演示：小提琴

Answer 3

 var toggle = false;

 $('#tog').click(function () {
  if(toggle == false){
    $('.aaa').mouseenter(function () {
        $(this).css('background', '#aaaaaa');
        $(this).css('border', 'solid 1px red');
    });
    $('.aaa').mouseleave(function () {
         $(this).css('background','blue');
    });
    toggle = true;
  }
  else{
        $('.aaa').off('mouseenter mouseleave');
        toggle = false;
  }
 });