移动端touch事件demo效果示例(整理)

简介: 移动端touch事件demo效果示例(整理)
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
        <title>移动端touch事件</title>
        <style>
      #div {
        width: 100%;
        height: 800px;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id="div"></div>
    <script type="text/javascript">
      var div = document.getElementById('div');
      div.addEventListener('touchstart', function(event) {
        // var ev = event || ev;
        event.preventDefault();
        div.style.background = 'red';
      }, false);
      //touchstart 当手指触摸屏幕时
      div.addEventListener('touchmove', function(event) {
        // var ev = event || ev;
        event.preventDefault();
        div.style.background = 'blue';
      }, false);
      //touchmove 当手指在屏幕上移动时
      div.addEventListener('touchend', function(event) {
        // var ev = event || ev;
        event.preventDefault();
        div.style.background = 'yellow';
      }, false);
      //touchend 当手指划过屏幕时
    </script>
  </body>
</html>
相关文章
|
10月前
|
JSON 小程序 前端开发
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
【微信小程序】-- 案例 - 自定义 tabBar(四十六)
移动端整页滑屏示例(上下滑动整屏)demo效果示例(整理)
移动端整页滑屏示例(上下滑动整屏)demo效果示例(整理)
|
JavaScript
手机移动端返回顶部js代码demo效果示例(整理)
手机移动端返回顶部js代码demo效果示例(整理)
|
JavaScript
js手机端下拉刷新效果demo效果示例(整理)
js手机端下拉刷新效果demo效果示例(整理)
|
移动开发
手机端H5加载中效果demo(整理)
手机端H5加载中效果demo(整理)
uniapp小程序跳转其他小程序uni.navigateToMiniProgram效果demo(整理)
uniapp小程序跳转其他小程序uni.navigateToMiniProgram效果demo(整理)