代码之家 › 专栏 › 技术社区 › user3442612

在用off()删除事件后重新添加事件

jquery

user3442612 · 技术社区 · 7 年前

我有一个功能,在mouseenter/mouseleave上的一个元素下面显示/隐藏一个悬停框,如果用户单击该元素,则在同一个元素上显示/隐藏悬停框。

我已经用click事件删除了mouseenter/mouseleave事件,但是如果用户单击取消悬停框,就无法找到将它们添加回去的方法。

当用户单击悬停框将其取消时,如何返回mouseenter/mouseleave事件?

Fiddle

JQuery

// add hoverbox on click
$('.icon').on('click', function() {
  var $iconPosition = $(this).position(); // position on clicked icon
  //console.log($iconPosition)
  // set hoverbox position based on current icon position and make visible
  $('.hoverbox').offset({
    top: $iconPosition.top + 10,
    left: $iconPosition.left
  }).css({
    "display": "block"
  });

  $('.icon').off('mouseenter mouseleave'); // remove mouseenter mouseleave functionality 
});

// remove hoverbox on click
$('.hoverbox').on('click', function() {
  // reset offset or it will accumulate after each click
  $('.hoverbox').offset({
    top: 0,
    left: 0
  }).css({
    "display": "none"
  });
});

// add hoverbox on mouseenter
$('.icon').on('mouseenter', function() {
  var $iconPosition = $(this).position(); // position on clicked icon
  //console.log($iconPosition)
  // set hoverbox position based on current icon position and make visible
  $('.hoverbox').offset({
    top: $iconPosition.top + 130,
    left: $iconPosition.left
  }).css({
    "display": "block"
  });
});

// remove hoverbox on mouseleave
$('.icon').on('mouseleave', function() {
  // reset offset or it will accumulate after each click
  $('.hoverbox').offset({
    top: 0,
    left: 0
  }).css({
    "display": "none"
  });
});

1 回复 | 直到 7 年前

Barmar 7 年前

注释建议了添加和删除处理程序的替代方法。但如果您真的想这样做,您应该将处理程序函数放在一个命名函数中。然后你可以很容易地把它加回去。

function mouseLeaveHandler() {
  // ...
}

function mouseEnterHandler() {
  // ...
}

$(".icon").on({
  mouseenter: mouseEnterHandler,
  mouseleave: mouseLeaveHandler
});

// add hoverbox on click
$('.icon').on('click', function() {
  var $iconPosition = $(this).position(); // position on clicked icon
  //console.log($iconPosition)
  // set hoverbox position based on current icon position and make visible
  $('.hoverbox').offset({
    top: $iconPosition.top + 10,
    left: $iconPosition.left
  }).css({
    "display": "block"
  });

  $('.icon').off('mouseenter mouseleave'); // remove mouseenter mouseleave functionality 
});

// remove hoverbox on click
$('.hoverbox').on('click', function() {
  // reset offset or it will accumulate after each click
  $('.hoverbox').offset({
    top: 0,
    left: 0
  }).css({
    "display": "none"
  });

  $(".icon").on({
    mouseenter: mouseEnterHandler,
    mouseleave: mouseLeaveHandler
  });

});