如何让jQuery.eraser插件在hover而非点击时触发擦除效果

问题原因 #

你之前的方案无效有两个核心原因：

1. jQuery.eraser插件本身没有监听click事件作为擦除的触发入口，它内部的擦除逻辑是绑定在mousedown（启动擦除）、mousemove（执行擦除）、mouseup（结束擦除）事件链上的，触发click不会走到插件的擦除逻辑中。
2. 擦除逻辑依赖事件对象携带的pageX、pageY坐标参数来定位擦除位置，直接调用trigger('click')不会传入对应坐标，插件无法确定擦除区域，自然不会有效果。

可行解决方案 #

方案1：hover时跟随鼠标移动持续擦除

如果需要实现鼠标悬停在图片上时，鼠标移动到哪里就擦到哪里的效果，使用以下代码即可：

const $eraserImg = $('#image1');

// 鼠标进入时触发mousedown，开启擦除状态
$eraserImg.on('mouseenter', function (e) {
  $(this).trigger($.Event('mousedown', {
    pageX: e.pageX,
    pageY: e.pageY
  }));
});

// 鼠标移动时触发mousemove，持续执行擦除
$eraserImg.on('mousemove', function (e) {
  $(this).trigger($.Event('mousemove', {
    pageX: e.pageX,
    pageY: e.pageY
  }));
});

// 鼠标离开时触发mouseup，关闭擦除状态
$eraserImg.on('mouseleave', function (e) {
  $(this).trigger($.Event('mouseup', {
    pageX: e.pageX,
    pageY: e.pageY
  }));
});

方案2：hover时仅擦除鼠标进入位置的单点区域

如果不需要跟随移动，只需要鼠标悬停时擦除进入位置的一小块区域，使用简化版代码即可：

$('#image1').on('mouseenter', function (e) {
  // 触发按下+抬起事件，完成单点擦除
  $(this).trigger($.Event('mousedown', {pageX: e.pageX, pageY: e.pageY}));
  $(this).trigger($.Event('mouseup', {pageX: e.pageX, pageY: e.pageY}));
});

内容的提问来源于stack exchange，提问作者caffeinehigh