javascript - 如何实现滑动监听器？

Question

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

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

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 中查看