移动端下jQuery Sortable阻止click/dblclick点击事件触发问题求助

1. 代码中调用的.disableSelection()是jQuery UI提供的文本选中禁用方法，虽然可以避免拖动时选中文本，但会直接拦截元素上所有点击类事件，移动端触摸转点击的逻辑会被直接屏蔽，这是核心诱因。
2. jQuery Sortable为了处理拖动逻辑，会监听touchstart、touchmove、touchend等移动端触摸事件，默认会阻止部分事件的冒泡和默认行为，导致原生点击/双击事件无法正常触发。
3. 移动端双击事件本身存在300ms左右的判定延迟，和Sortable的拖动触发阈值冲突，系统会优先判定为拖动操作，直接吃掉点击事件。

方案1：移除disableSelection，改用CSS实现文本禁用（优先推荐，改动最小） #

首先删除JS代码末尾的.disableSelection()调用，新增CSS规则禁止元素选中文本，既不影响拖动功能，也不会拦截点击事件：

.reorder-gallery li {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

同时建议将双击事件改为事件委托形式，避免后续动态添加列表项时绑定失效：

// 替换原有的dblclick绑定逻辑
$("#sortable").on("dblclick", ".mediaSort", function(){
  alert("Double Clicked!!");
});

绝大多数场景下该方案即可直接解决问题。

方案2：配置Sortable触发阈值，区分点击和拖动操作 #

如果完成方案1修改后仍存在冲突，可以给Sortable新增delay或distance参数，设置只有满足指定条件才触发排序逻辑，避免将点击误判为拖动：

$("#sortable").sortable({
  axis: 'x,y',
  containment: "parent",
  tolerance:'pointer',
  delay: 150, // 按住150ms后才触发拖动，短按判定为点击
  // 也可使用 distance: 5, 代表拖动超过5像素才触发排序，二选一即可
  update: function(event, ui) {
    // 原有update逻辑保持不变
    var item_order = new Array();
    $('ul.reorder-gallery li').each(function() {
        item_order.push($(this).attr("id"));
    });
    $.ajax({
        type: "POST",
        url: "processes/sort.php",
        data: 'order='+item_order,
        cache: false,
      success: function(data){}
    });
    }
// 删掉.disableSelection()调用
});

方案3：手动监听触摸事件模拟双击（兼容极端场景） #

如果部分老旧移动端设备原生双击事件仍然被拦截，可以自行通过触摸事件模拟双击逻辑：

let lastClickTime = 0;
$("#sortable").on("touchend click", ".mediaSort", function(e){
  e.preventDefault();
  const currentTime = new Date().getTime();
  const tapLength = currentTime - lastClickTime;
  if (tapLength < 300 && tapLength > 0) {
    // 此处写双击触发的逻辑
    alert("Double Clicked!!");
  }
  lastClickTime = currentTime;
});

内容的提问来源于stack exchange，提问作者Mr. Crypto