由于移动端是触摸事件,所以要用到H5的属性touchstart/touchmove/touched,但是PC端只支持鼠标事件,所以此时可以这样转换

var touchEvents = {
touchstart:"touchstart",
touchmove:"touchmove",
touchend:"touchend",
initTouchEvents:function () {
       var self = this;
if (self.isPC()) {
self.touchstart = "mousedown";
self.touchmove = "mousemove";
self.touchend = "mouseup";
}
},
     isPC:function(){ //判断pc端与移动端
           var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); //判断用户代理头信息
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) != -1) { flag = false; break; }
}
return flag; //true为pc端,false为非pc端
     }
};

移动端与PC端的触屏事件的更多相关文章

  1. 移动端touch触屏滑动事件、滑动触屏事件监听!

    一.触摸事件 ontouchstart.ontouchmove.ontouchend.ontouchcancel 目前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因 ...

  2. 从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 关于移动端和PC端的交互的区别

    对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...

  4. 前端:移动端和PC端的区别

    在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性.网速.适配.页面布局等方面的不同,但是还是很不系统,所以这里做一个总结. 第一: PC考虑的是浏览器的兼容性 ...

  5. 移动端和PC端有什么区别

    1.PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨 ...

  6. 简述移动端与PC端的区别

    1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更 ...

  7. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  8. js判断游览器是移动端还是PC端

    js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...

  9. 检测当前运行环境——移动端与PC端。

    方法1: $(function checkBrowser(){ var browser={ versions:function(){ var u = navigator.userAgent, app ...

  10. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

随机推荐

  1. 第二类Stirling数

    第二类斯特林数 第二类Stirling数:S2(p, k) 1.组合意义:第二类Stirling数计数的是把p个互异元素划分为k个非空集合的方法数 2.递推公式: S2(0, 0) = 1 S2(p, ...

  2. 第一阶段——站立会议总结DAY08

    补发:因为第八次也就是第八天,那天有一个更重要的东西,看懂一个电商的系统.所以,未有进展.

  3. 关于POD和非POD类型中,list initialization和constructor initialization(未解决)

    如果你的成员是POD类型的,那么list initialization和constructor initialization没有任何区别 #include<iostream> using ...

  4. vue 监听store中的数值

      computed: {   isFollow () {     return this.$store.state.demo.id; //需要监听的数据   } }, watch: {   isFo ...

  5. python-day74--知识总体总结

    1. 课程介绍        - 数据类型        - 函数        - 面向对象三大特性:继承,封装,多态        - socket:本质传输字节:所有网络通信都基于socket  ...

  6. Hadoop介绍-4.Hadoop中NameNode、DataNode、Secondary、NameNode、JobTracker TaskTracker

    Hadoop是一个能够对大量数据进行分布式处理的软体框架,实现了Google的MapReduce编程模型和框架,能够把应用程式分割成许多的 小的工作单元,并把这些单元放到任何集群节点上执行.在MapR ...

  7. Vue keep-alive总结

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是 ...

  8. MYSQL--三大范式

    MYSQL--三大范式 范式简介: 设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小.目前关系数据库有六 ...

  9. swftools安装教程

    1 安装说明 本教程以环境为CentOS6.5+swftools-0.9.1.安装目录等可根据自己需要更改. 2 安装过程 1)下载软件 http://www.swftools.org/downloa ...

  10. Sql server中如何将表A和表B的数据合并(乘积方式)

    sql server中如何将表A 和表B的数据合并成乘积方式,也就是说表A有2条数据,表B有3条数据,乘积后有6条数据, 这就要用到sql中的笛卡尔积方式了 1.什么是笛卡尔积 笛卡尔积在SQL中的实 ...