2.

默认的监听方式

document.addEventListener('touchstart', function(){ alert('hello'); }, false);

使用jquery时

$(document).on('touchstart', function(e){

  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

});

2.我们常用:hover,:focus,:active等css伪类做按钮点击的反馈效果,可是这时在移动端开发时会遇到这样一个问题,伪类状态没有反应 pc端ok, 安卓上ok,可遇到iPhone设备就不行了

1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>
在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

document.body.addEventListener('touchstart', function () { //...空函数即可});

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

获得touch事件,jquery绑定事件监听器,ios设备上打开touch状态以响应focus,active等伪类的更多相关文章

  1. iPhone, Android等设备上的Touch和Gesture

    现在,为智能触摸手机创建直观的用户界面时,最重要的部分不再是单纯的视觉效果,而是要创建出能很好地处理用户触摸交互的界面.对于Web应用而言,这意味着使用touch事件来取代传统的mouse事件.在Do ...

  2. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...

  3. jQuery绑定事件-多种方式实现

    jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...

  4. jQuery学习-事件之绑定事件（三）

    在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...

  5. jQuery学习-事件之绑定事件（二）

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  6. jQuery绑定事件的on()

    jQuery绑定事件 语法:$(selector).on(event,childselector,function(){}); 可以为自身的加事件(一个或多个)  也可以为其子元素加事件(一个或多个) ...

  7. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  8. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  9. 关于jquery绑定事件执行两次

    经常会出现jquery绑定事件执行两次的情况,如: $("a[tag=slide]").click(function () { alert(1); $(this).parent() ...

随机推荐

  1. css3 媒体查询的学习。

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  2. Pandas 基本技巧

    1.数据查看和转置 import numpy as np import pandas as pd # 导入numpy.pandas模块 # 数据查看.转置 df = pd.DataFrame(np.r ...

  3. 笔记-scrapy-深入学习-sheduler

    笔记-scrapy-深入学习-sheduler 1.      scheduler.py source code:scrapy/core/scheduler.py: 1.1.    初始化的开始 在分 ...

  4. H2数据库使用

    H2数据库使用 H2数据库介绍 H2的优势: 1.h2采用纯Java编写,因此不受平台的限制. 2.h2只有一个jar文件,十分适合作为嵌入式数据库试用. 3.性能和功能的优势 H2和各数据库特征比较 ...

  5. Git从入门到熟练

    Git的特性 1. 分布式版本控制 集中式VS分布式 保存更新时的文件快照而非差异 (快照 :是文件系统中的概念或者技术:来自照相领域的概念,是指特定时间点的一个状态) 其他系统在每个版本中记录着各个 ...

  6. 【Kernel Logistic Regression】林轩田机器学习技术

    最近求职真慌,一方面要看机器学习,一方面还刷代码.还是静下心继续看看课程,因为觉得实在讲的太好了.能求啥样搬砖工作就随缘吧. 这节课的核心就在如何把kernel trick到logistic regr ...

  7. SpringMVC 整合 kaptcha（验证码功能）

    一.添加依赖 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptch ...

  8. Kotlin中功能操作与集合（KAD 11）

    作者:Antonio Leiva 时间:Feb 2, 2017 原文链接:https://antonioleiva.com/functional-operations-collections-kotl ...

  9. Jmeter微信小程序接口测试

    最近公司新项目组开发一款微信小程序电商平台,为了更好保证产品质量,因此提出了需要进行接口测试. 从接口本身来讲,对其测试与其他项目应该是一样的.所以不难理解,我们要对小程序的接口测试需要准备的 材料有 ...

  10. 更改maven本地仓库地址

    1.进入maven安装conf文件中,编辑settings.xml文件,新增图中的圈出的内容(我想要存放的地址是D:\HMY\m2\repository) 2.复制settings.xml文件至D:\ ...