如何使ToDo列表任务左键点击即可编辑？contenteditable异常排查

问题原因 #

你遇到的问题是因为jQuery UI的Sortable组件默认会拦截列表项（li）内部所有元素的鼠标点击事件，用来实现拖拽排序功能。这就导致左键点击contenteditable="true"的p标签时，事件被Sortable捕获，无法触发编辑状态；而右键点击不受拖拽逻辑影响，所以能正常进入编辑。

解决方案 #

可以通过两种方式解决，核心是让Sortable组件不拦截任务文本区域的点击事件：

方案1：使用cancel选项排除任务文本元素 #

修改Sortable的初始化代码，指定.task元素不触发拖拽逻辑，这样点击该元素时就不会被Sortable拦截：

taskRow.sortable({
  cancel: ".task" // 排除.task元素，允许其正常响应点击
});

方案2：指定拖拽手柄（handle） #

如果希望只有特定区域可以触发拖拽（比如复选框或删除按钮），可以设置handle选项，限制拖拽触发的元素：

taskRow.sortable({
  handle: ".task__checkbox, .btn-delete" // 只有点击复选框或删除按钮时才触发拖拽
});

修改后的完整JS代码 #

const taskInput = $(".main__input");
const taskRow = $(".task-row");
const task = $("li");
let id = 0;

// 添加任务
const addTask = function() {
  const markup = `
  <li data-id=${id}>
    <div class="main">
      <div class="task__checkbox">
          <input type="checkbox" class="checkbox">
      </div>
      <p class="task" contenteditable="true">${taskInput.val()}</p>
    </div>
    <div class="btn-task btn-delete icon" data-id=${id}>
      <i class="fa-sharp fa-solid fa-trash"></i>
    </div>
  </li>  
  `;
  taskRow.append(markup);
  id++;
  taskInput.val("");
};

$(".btn-plus").on("click", function() {
  if (taskInput.val() !== "") addTask();
});

// 删除任务
taskRow.on("click", ".btn-delete", function(e) {
  $(this).parent().remove();
});

// 切换任务完成状态
taskRow.on("change", ".task__checkbox", function() {
  $(this).closest(".main").find(".task").toggleClass("checked");
});

// 回车添加任务
$(window).on("keypress", function(e) {
  if (e.which === 13 && taskInput.val() !== "") addTask();
});

// 初始化Sortable，添加cancel选项解决编辑问题
taskRow.sortable({
  cancel: ".task"
});

额外优化提示 #

• 原代码中切换checked类的逻辑有小问题：$(this).siblings(".task")无法正确找到p标签，因为checkbox在.task__checkbox容器里，已经修正为$(this).closest(".main").find(".task")。
• 可以给.task添加cursor: text的CSS样式，让用户更直观地知道这个区域可编辑：

.task {
  /* 原有样式 */
  cursor: text;
}

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