OGX.JS如何绑定多个鼠标/触摸事件解决实例覆盖问题

问题原因 #

this.touch.dist是OGX.JS初始化时生成的全局单例监听对象，每次调用set方法都会重置该对象的绑定目标、回调等全部配置，因此后一次的设置会直接覆盖前一次的规则，无法同时对多个元素生效。

实现方式 #

不要复用默认的单例实例，针对每个需要监听的元素单独实例化独立的OGX.TouchDist对象即可，原有回调逻辑不需要修改，示例代码如下：

// 绑定第一个元素.box1的移动距离监听
const box1Dist = new OGX.TouchDist({
  target: '.box1',
  cb_move: function(obj){
    // 原有.box1的移动距离处理逻辑
  }
});

// 绑定第二个元素.box2的移动距离监听
const box2Dist = new OGX.TouchDist({
  target: '.box2',
  cb_move: function(obj){
    // 原有.box2的移动距离处理逻辑
  }
});

补充说明 #

• 每个独立实例的配置规则和默认this.touch.dist.set支持的参数完全一致，方向限制、触发阈值、开始/结束回调等配置都可以正常传入
• 如果后续需要移除某个元素的监听，直接调用对应实例的destroy方法即可，比如box1Dist.destroy()，不会影响其他实例的正常运行

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