jQuery手风琴组件展开时自动选中全部文本的解决方法

这个问题在Chrome浏览器中出现，核心原因是快速连续点击触发元素时，浏览器会把两次短间隔的点击识别成双击，进而触发了双击选中文本的默认行为。我们可以在保留用户手动选中文本功能的前提下，通过针对性的处理解决这个问题。

具体解决方案 #

1. 阻止触发元素的双击默认行为：给.accordion_trigger添加双击事件监听，直接阻止浏览器默认的双击选中文本动作，不会影响用户正常的手动拖动选文本操作。
2. 修正代码中的选择器错误：你的JS代码里的选择器缺少类名前缀.，比如$("accordion_trigger")应该是$(".accordion_trigger")，$("fa-chevron-up")要改成$(".fa-chevron-up")，否则无法正确匹配页面元素。

修改后的完整JS代码 #

$(document).ready(function() { 
  // Open first panel automatically
  $(".accordion_trigger")[0].nextElementSibling.classList.add("active");
  $(".accordion_trigger")[0].lastElementChild.classList.replace(
    "fa-chevron-down", "fa-chevron-up"
  );

  // 阻止双击触发的默认选中文本行为
  $(".accordion_trigger").on("dblclick", function(e) {
    e.preventDefault();
  });

  // Click event listener
  $(".accordion_trigger").on("click", function() {
    // Show panel on click
    this.nextElementSibling.classList.toggle("active");
    // update the font-awesome icon up/down
    const fa = this.lastElementChild.classList;
    fa.contains("fa-chevron-down") ? fa.replace("fa-chevron-down", "fa-chevron-up") : fa.replace("fa-chevron-up", "fa-chevron-down");
    // Remove all other chevron down icons
    const chevrons = $(".fa-chevron-up").filter(
      (index, item) => item != this.lastElementChild
    );
    for (var item of chevrons) {
      item.classList.replace("fa-chevron-up", "fa-chevron-down");
    }
    // Hide all other panels on click
    const others = $(".accordion_trigger").filter(
      (index, item) => item != this
    );
    for (var item of others) {
      item.nextElementSibling.classList.remove("active");
    }

    // 可选保险：点击后清除意外产生的文本选区
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      selection.removeAllRanges();
    }
  });
});

方案说明 #

• 双击事件的preventDefault()精准针对浏览器的双击选中文本行为，用户手动拖动选文本的操作完全不受影响。
• 修正选择器后，代码才能正确定位元素，避免因为选择器错误导致的功能异常。
• 可选的清除选区代码作为双重保障，确保即使有意外选区产生，也能在点击后立即清除。

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