移动端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>
相关文章
移动端整页滑屏示例(上下滑动整屏)demo效果示例(整理)
移动端整页滑屏示例(上下滑动整屏)demo效果示例(整理)
|
JavaScript
手机移动端返回顶部js代码demo效果示例(整理)
手机移动端返回顶部js代码demo效果示例(整理)
|
JavaScript
js鼠标可控的表格左右滑动demo效果示例(整理)
js鼠标可控的表格左右滑动demo效果示例(整理)
|
小程序 定位技术
uniapp小程序打开地图选择位置demo效果wx.chooseLocation(整理)
uniapp小程序打开地图选择位置demo效果wx.chooseLocation(整理)
|
Android开发
Android项目实战(十六):QQ空间实现(一)—— 展示说说中的评论内容并有相应点击事件
原文:Android项目实战(十六):QQ空间实现(一)—— 展示说说中的评论内容并有相应点击事件 大家都玩QQ空间客户端,对于每一个说说,我们都可以评论,那么,对于某一条评论: 白雪公主 回复 小矮人 : 你们好啊~ 我们来分析一下: 1、QQ空间允许我们 点击 回复人和被回复人...
1043 0
|
10月前
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?
HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?

相关实验场景

更多