Polymer 2.0自定义元素添加手势事件后原生事件失效求助

我之前也碰到过一模一样的问题，当时用GestureEventListeners混入类实现手势后，原生的触摸/鼠标事件突然就不工作了，哪怕调用setTouchAction也没效果，折腾了好一阵子才找到几个可行的解决思路：

1. 确保setTouchAction作用在正确的目标元素上 #

你之前调用Polymer.Gestures.setTouchAction(this,"auto")是给整个自定义元素设置的，但手势是绑定在#dragme这个子元素上的，Polymer的手势拦截逻辑是针对触发手势的元素生效的。试试把目标换成手势绑定的元素：

ready() {
  super.ready();
  Polymer.Gestures.setTouchAction(this.$.dragme, "auto");
}

这样能明确告诉Polymer不要拦截这个元素的原生触摸行为，让浏览器正常处理原生事件。

2. 在手势处理函数中放行原生事件 #

如果上面的方法还是不行，可以在你的handleTrack函数里手动允许原生事件继续传播。比如：

handleTrack(event) {
  // 你的手势处理逻辑...
  
  // 放行原生事件，取消Polymer的拦截
  event.nativeEvent.stopImmediatePropagation = () => {};
  event.nativeEvent.preventDefault = () => {};
}

GestureEventListeners会默认阻止原生事件的默认行为和传播，通过重写这些方法可以让原生事件继续触发。

3. 替换为手动注册手势事件（不使用混入类） #

如果上面两种方法都没效果，可以放弃GestureEventListeners混入类，改用手动注册手势事件的方式，这样不会全局拦截原生事件：

ready() {
  super.ready();
  // 手动给目标元素注册track事件
  Polymer.Gestures.addListener(this.$.dragme, 'track', this.handleTrack.bind(this));
}

这种方式更灵活，只会针对特定元素处理手势，不会影响其他元素的原生事件逻辑。

你可以先试试第一种方法，这是最常见的解决场景，我当时就是这么搞定的！

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