2015-04-07 196 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>