2015-04-07 161 views
0

我试图在我的浏览器简单的例子

<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> 

我试图执行此代码运行像水龙头刷卡简单的手势代码,但这正显示出错误 无法读取属性“的addEventListener”的null

回答

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,你将无法阅读该邮件。

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