ZingTouch阻止用户在输入字段中输入单词

Question

ZingTouch is a JavaScript touch gesture detection library for the modern web.

开始使用它之后，我再也无法在输入字段中输入单词了。

出现相同问题的

CodePen示例：链接：https://codepen.io/anon/pen/xMVXyQ

我的输入字段如下：

  <div class="input-group input-group-lg mb-3">
   <input type="text" name="praeferenz" class="form-control" placeholder="" aria-label="..." aria-describedby="basic-addon2">
   <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">-Utilitarismus</span>
   </div>
  </div>

此 GIF 显示了在没有ZingTouch的情况下输入字段的工作方式：

添加Zingtouch后，我无法在输入字段中输入任何单词。

此 GIF 显示了如何无法单击该字段：

这是导致问题的代码：

//zingtouch
var touchArea = document.body;
var myRegion = new ZingTouch.Region(touchArea);

myRegion.bind(touchArea, 'swipe', function(e){
  if(90 < e.detail.data[0].currentDirection && e.detail.data[0].currentDirection < 270){
    console.log("LEFT SWIPE");
    getNextSlide();
  } else{
    console.log("RIGHT SWIPE");
    getPreviousSlide();
  }
});

问题：

我是否可以同时拥有ZingTouch和在输入字段中输入单词的功能？

我注意到的事情：

1. 我仍然可以单击按钮。我所有的按钮都按预期工作。

2. 当我单击页面上的任意位置时，'style="touch-action: none;"'被添加到"body"。

到目前为止我尝试过的事情：

我试图使用其他地区。

我创建了一个具有ID的div而不是document.body，并将其用作区域：

var touchArea = document.getElementById('yield');
var myRegion = new ZingTouch.Region(touchArea);

但是问题仍然存在。

CodePen示例

以下CodePen演示了相同的问题。

无法单击输入字段。

链接：https://codepen.io/anon/pen/xMVXyQ

Answer 1

ZingTouch.Region具有第三个参数preventDefault，可用于转换此行为。

喜欢：

const zt = new ZingTouch.Region(document.body, undefined, false)

const zt = new ZingTouch.Region(element, capture, preventDefault)

• element-用于设置侦听器的元素
• 捕获-该区域是侦听捕获还是气泡。
• preventDefault-禁用浏览器功能，例如在区域上滚动和缩放。

请参见https://github.com/zingchart/zingtouch#region

将preventDefault转到false之后，例如监听文档事件并使用下面的输入字段。通常zingtouch将touch-action: none;添加到元素的样式中，以防止交互。