Question

我具有一项功能，该功能可将鼠标悬停框显示/隐藏在鼠标输入/多重天线上的元素下方，如果用户单击该元素，则可在同一元素上方显示/隐藏。

我已经设法通过click事件删除了mouseenter / mouseleave事件，但是如果用户单击以取消悬停，则无法找到将它们重新添加的方法。

当用户单击悬停框以将其关闭时，如何获取mouseenter / mouseleave事件？

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"
  });
});

Answer 1

评论提出了添加和删除处理程序的替代方法。但是，如果您确实想这样做，则应将处理程序函数放在命名函数中。然后，您可以轻松地将其重新添加。

| /home/jovyan/workspace | workspace in the docker image |

使用off（）删除事件后，请重新添加事件

1 个答案: