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. lnamp高性能架构之apache和nginx的整合

    搭建过lamp博友和lnmp的博友们可能对这这两个单词并不陌生,对与apachen,nginx相比都源码或yum安装过,但知道apache的nginx的优点,apache处理动态页面很强,nginx处 ...

  2. PHP表单安全过滤和防注入 htmlspecialchars() 和test_input()

    什么是 htmlspecialchars() 函数? htmlspecialchars() 函数把特殊字符转换为 HTML 实体.这意味着 < 和 > 之类的 HTML 字符会被替换为 & ...

  3. linux学习(1)——这是一个新的开始,加油吧少年

     (一)自己简单总结 学会使用简单命令 Tab:实现自动补全功能 Ctrl+D:退出当前终端 Ctrl+Z:暂停当前进程 Ctrl+L:清屏 Ctrl+A:可以让光标移动到最前列 Ctrl+E:可以让 ...

  4. P1414 又是毕业季II (数学?

    题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业晚会上,相信,这一定 ...

  5. spider_main.py

    coding=UTF-8 import html_download import html_outputer import html_parser import url_maneger class S ...

  6. 获取<考试>博文密码!o(*≧▽≦)ツ

    就是CJ高二组通用的密码 如果你想知道,请联系QQ,3057244225,或者直接面对面问博主(...) 是我们的内部材料,原创题目是不能外传的.请谅解. 当然如果是原题的话我们是不会上锁的啦

  7. Ubuntu设置root密码[repost]

    From: http://hi.baidu.com/busybox/item/283e7d31433db7179cc65ef3 安装完Ubuntu后在终端使用命令:su -然后输入密码,总是不正确.原 ...

  8. spring 笔记2:Spring MVC : Did not find handler method for 问题的解决

    日志显示为: Looking up handler method for path /***Did not find handler method for [/***]No mapping found ...

  9. http协议--留

    1.http消息结构 *http客户端,即web浏览器,链接到服务器,向服务器发送一个http请求的目的 *http服务器,即web服务,接受请求,并向客户端发送http响应数据 http统一资源标识 ...

  10. vue 实例 网站

    Pure vue demo 实战第一节:Vue基础一 Pure vue demo 实战第二节:Vue基础二 Pure vue demo 实战第三节:Vue组件 Pure vue demo 实战第四节: ...