点击动态添加touchpunch脚本后移动端签名拖拽功能失效问题咨询

嘿，这个脚本加载和功能冲突的问题我之前也碰到过，咱们一步步来搞定它！

问题根源 #

你动态加载TouchPunch的思路是对的，但忽略了一个关键：脚本加载是异步的。你直接把脚本append到页面后，它不会立刻执行完成，这时候TouchPunch还没来得及修改jQuery UI的draggable方法，所以后续的拖拽初始化自然不会生效。另外，TouchPunch会拦截触摸事件，这也是导致签名框点击失效的原因——提前加载它会把签名框的点击事件当成触摸拖拽处理了。

正确的动态加载方案 #

我们需要等TouchPunch完全加载并执行后，再重新初始化签名元素的draggable功能。具体代码如下：

// 签名框的点击事件处理函数
$('.signature-box').on('click', function() {
  // 先检查TouchPunch是否已加载，避免重复添加脚本
  if (typeof $.ui === 'undefined' || !$.ui.touchPunch) {
    console.log("开始加载TouchPunch...");
    const touchPunchScript = document.createElement('script');
    touchPunchScript.src = '{{ asset("js/touchpunch.js") }}';
    
    // 监听脚本加载完成事件，确保TouchPunch生效后再初始化拖拽
    touchPunchScript.onload = function() {
      console.log("TouchPunch加载完成，初始化拖拽功能");
      // 替换成你的签名元素选择器和拖拽配置
      $('.signature-element').draggable({
        containment: '.contract-container', // 限制拖拽范围
        cursor: 'move'
      });
    };
    
    document.body.appendChild(touchPunchScript);
  } else {
    // 如果已经加载过TouchPunch，直接重新初始化拖拽
    $('.signature-element').draggable({
      containment: '.contract-container',
      cursor: 'move'
    });
  }
  
  // 打开签名模态框
  $('#signature-modal').modal('show');
});

额外优化建议 #

1. 避免重复初始化：在模态框关闭时，可以销毁拖拽功能，下次打开时再重新初始化，防止多次绑定导致的异常：

   $('#signature-modal').on('hidden.bs.modal', function() {
     $('.signature-element').draggable('destroy');
   });
   

2. 确保依赖已加载：页面初始化时必须先加载jQuery和jQuery UI，TouchPunch依赖这两个库，否则动态加载会报错。
3. 调试技巧：用console.log替代alert，更方便查看加载时序和错误信息，避免阻塞页面。

替代方案（如果动态加载仍有问题） #

如果动态加载还是遇到奇怪的问题，你可以尝试一开始就加载TouchPunch，但通过事件拦截来保留签名框的点击功能：

// 给签名框绑定点击事件，阻止TouchPunch的触摸事件冒泡
$('.signature-box').on('touchstart', function(e) {
  e.stopPropagation();
}).on('click', function() {
  $('#signature-modal').modal('show');
  // 初始化拖拽
  $('.signature-element').draggable({
    containment: '.contract-container'
  });
});

这个方法的原理是让签名框的触摸事件不被TouchPunch处理，只保留点击功能，而签名元素的拖拽则正常使用TouchPunch的支持。

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