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. JAVAOOP继承

    继承:修饰符 子类 extends 父类{    //类定义部分},不可以使用private和protected修饰类 减少代码量,实现无损替换 必须符合A is a B的关系 宝马  车 狗     ...

  2. 10.2 DOM 操作技术【JavaScript高级程序设计第三版】

    很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...

  3. Django自带后台管理配置

    Django自带后台管理的配置 创建项目和应用 修改配置文件 数据库配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql' ...

  4. Mysql 索引 简介

    Mysql索引 索引的分类 索引的创建 索引的注意事项 什么是索引 索引是存储引擎用于快速查找记录的一种数据结构. 索引由数据库中一列或者多列组成,作用是提高表的查询速度. 索引的优点,提高检索数据的 ...

  5. C++ 整型长度的获取 不同的系统

    不同的系统中,C++整型变量中的长度位数是不同的,通常,在老式的IBM PC中,int 的位数为16位(与short相同),而在WINDOWS XP,Win7,vax等很多其他的微型计算机中,为32位 ...

  6. G - Dreamoon and NightMarket Gym - 101234G 优先队列+思路

    题目:题目链接 题意:给出n种食物,食物有自己的价格并且可以自由搭配,每天吃之前没吃过的花费最少的搭配,问第k天的花费. 思路:第k小我们考虑用优先队列处理,虽然n比较大,但由于1 ≤ K ≤ min ...

  7. 大数据江湖之即席查询与分析（下篇）--手把手教你搭建即席查询与分析Demo

    上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...

  8. Android 数据库的线程合作

    前言:之前琢磨了很多线程相关的东西,一直摸不着头脑,直到学到了数据库,终于发现世界原来如此美好,任何事物都有存在的理由. 1.主线程,我把它比作长江,作为母亲河的长江,想必大家每个人都不会很陌生. 2 ...

  9. P3817 小A的糖果（洛谷月赛）

    P3817 小A的糖果 题目描述 小A有N个糖果盒,第i个盒中有a[i]颗糖果. 小A每次可以从其中一盒糖果中吃掉一颗,他想知道,要让任意两个相邻的盒子中加起来都只有x颗或以下的糖果,至少得吃掉几颗糖 ...

  10. Github上最受关注的前端大牛 快来膜拜把！

    Github上最受关注的前端大牛 快来膜拜吧! 来源:csdn 发布时间:2014-08-06 阅读次数:4058 14   本文列出了Github上最受关注的10位前端大牛.看看他们负责的项目和提交 ...