如何实现滑动监听器？

Question

我知道这是非常基本的。我想在我的html代码中实现这个swipe-listener package。

这是自述文件中的示例代码：

const SwipeListener = require('swipe-listener');

var container = document.querySelector('#container');
var listener = SwipeListener(container);
container.addEventListener('swipe', function (e) {
  var directions = e.detail.directions;
  var x = e.detail.x;
  var y = e.detail.y;

  if (directions.left) {
    console.log('Swiped left.');
  }

  if (directions.right) {
    console.log('Swiped right.');
  }

   .
   .
   .

});

当我运行文件时，我收到“未定义文档”错误。我必须在这里指定什么？我假设我必须在“#container”中指定一个 div 元素。我有一个 iFrame，应该在其中检测到滑动。此 iFrame 具有名称和 ID。我必须使用哪一个？

此外，我需要 index.html 中的文件，如下所示。

<script>
    require('./swipeListener.js')
</script>

这是正确的方式还是我必须放

<script type="text/javascript" src="swipeListener.js"></script>

?

Answer 1

正如您可以阅读here，您不能在浏览器的常规javascript 中使用require，它是来自Node.js 的函数。为了使您的示例在简单的 html 页面中可用，您必须使用第二种方法，即使用脚本标记导入库。

这可以通过下载库并将其包含在其中来完成

<script src="path/to/swipe-listener.js" type="text/javascript"></script>

或通过 CDN 包含它

<script src="https://unpkg.com/swipe-listener@latest/dist/swipe-listener.min.js" type="text/javascript"></script>

包含库后，您可以像在示例中一样使用它，但不使用该行

const SwipeListener = require('swipe-listener');

我创建了一个简约示例，您可以在此jsfiddle 中查看