HammerJS中手势的简单示例

Question

我正在尝试在浏览器上运行简单的手势代码，例如点击滑动

<html>
<head>
</script src="https://hammerjs.github.io/dist/hammer.js">
</script>
<script>
    var myElement = document.getElementById('myElement');

    // create a simple instance
    // by default, it only adds horizontal recognizers
    var mc = new Hammer(myElement);

    // listen to events...
    mc.on("panleft panright tap press", function(ev) {
        myElement.textContent = ev.type + " gesture detected.";
    });
</script>


<style type="text/css">
#myElement {
    background: black;
    height: 300px;
    text-align: center;
    font: 30px/300px Helvetica, Arial, sans-serif;
}
</style>


</head>
<body>


    <div id="myElement"></div>

</body>
</html>

我正在尝试执行此代码，但这显示错误无法读取null的属性'addEventListener'

Answer 1

如所写，javascript在DOM准备就绪之前运行，并且找不到要附加的元素。 尝试这个：

<script>

  document.addEventListener("DOMContentLoaded", function(event) {

    var myElement = document.getElementById('myElement');

    // create a simple instance
    // by default, it only adds horizontal recognizers
    var mc = new Hammer(myElement);

    // listen to events...
    mc.on("panleft panright tap press", function(ev) {
        myElement.textContent = ev.type + " gesture detected.";
    });
  });
</script>

您可以参考https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

文本的默认颜色是黑色，因此除非您通过添加诸如color: white;调整css，否则您将无法阅读消息color: white; 。

<style type="text/css">
#myElement {
  background: black;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
  color: white;
}
</style>

HammerJS中手势的简单示例

问题描述

1 个解决方案

解决方案1
1 2015-04-23 04:58:43

HammerJS中手势的简单示例

问题描述

1 个解决方案

解决方案1 1 2015-04-23 04:58:43

解决方案1
1 2015-04-23 04:58:43