使用Quill编辑器绑定内部链接点击事件时触发多次的问题

看起来你遇到的问题是Quill编辑器里的内部链接点击后，所有链接的滚动逻辑都触发了，而不是只触发当前点击的那个。这种情况最常见的原因有两个，我给你拆解一下：

核心原因：重复绑定事件 #

你提到每次调用addLink方法时，都会用jQuery选择所有内部链接并绑定click事件。这里的坑在于：每次执行这段绑定代码，都会给所有匹配的链接再添加上一次click事件处理函数。

比如：

• 第一次添加链接A，给A绑定了1次点击事件；
• 第二次添加链接B，又给A和B各绑定了1次点击事件；
• 这时候点击A，就会触发2次滚动逻辑，看起来像是所有链接的逻辑都在跑。

另一种可能是你的事件处理函数里犯了个小错误：没有针对当前点击的链接处理，反而遍历了所有内部链接执行滚动逻辑，自然点一个就会触发所有的。

解决方法 #

1. 用事件委托（推荐，一劳永逸） #

既然Quill的内容是动态生成的，直接给单个链接绑定事件很容易失效或者重复绑定。不如把事件绑定到编辑器的父容器（甚至document）上，利用事件冒泡来处理，这样不管什么时候新增链接，事件都会自动生效，而且只会绑定一次：

// 把这段代码放在组件初始化的地方（比如componentDidMount或者useEffect），只执行一次
$(document).on('click', '.internal-link', function(e) {
  e.preventDefault(); // 阻止默认的跳转行为
  const targetId = $(this).attr('href').replace('#', ''); // 取出#后面的目标ID
  const targetElement = document.getElementById(targetId);
  if (targetElement) {
    // 平滑滚动到目标位置
    targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
});

这样以后不管你调用多少次addLink添加新链接，都不需要再重复绑定事件，点击时只会触发当前链接对应的滚动逻辑。

2. 避免重复绑定（如果坚持直接绑定） #

如果你还是想直接给链接绑定事件，那每次绑定前先移除之前的事件，防止重复：

addLink() {
  const quill = this.reactQuillRef.getEditor();
  var range = quill.getSelection();
  // ... 你的插入链接逻辑 ...
  
  // 先解绑所有旧的click事件，再绑定新的
  $('.internal-link').off('click').on('click', function(e) {
    e.preventDefault();
    const targetId = $(this).attr('href').slice(1);
    $('html, body').animate({
      scrollTop: $('#' + targetId).offset().top
    }, 300);
  });
}

不过这种方法要注意，如果其他地方也给这些链接绑定了click事件，off('click')会把它们一起移除，可能影响其他功能，所以还是事件委托更稳妥。

3. 检查事件处理函数的逻辑 #

确保你的click事件处理函数里，只针对当前点击的链接操作，不要错误地遍历所有链接。比如不要写：

// 错误示例：遍历所有链接执行滚动
$('.internal-link').click(function() {
  $('.internal-link').each(function() {
    const target = $(this).attr('href');
    $(target).scrollTop();
  });
});

而是要用$(this)指代当前点击的链接：

// 正确示例：只处理当前点击的链接
$('.internal-link').click(function(e) {
  e.preventDefault();
  const target = $(this).attr('href');
  $(target).get(0).scrollIntoView({ behavior: 'smooth' });
});

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