1.jquery给动态添加的元素添加事件

  在jquery推出新版本,使用.on()以前,我们会用.live()来为动态添加的代码绑定事件,但是现在jQuery用.on()替代了.live()

先看个.live()实例

$("a").live("click", function () {
  $("#111").append("ok");
});

再看一个.on()的实例

$("body").on("click","a", function () {
$("#111").append("ok");
});

其中,.live()的用法跟1.7之前的.on()类似,而1.9的.on()方法是on(events,[selector],[data],fn) ,可以指定绑定在哪个父节点上,在后面的选择器内写上要出发的元素选择器

live原理:

.live()则是通过事件委托的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

2.event.originalEvent JQuery

  今天在使用jquery的e.pageX时,发现其获得的值一直是undefined,百度了一下,换成了e.originalEvent.pageX就好了,问题是解决了,但是不知道原因,于是在Stack Overflow上搜了一下,在这里给大家翻译一下。

  event.originalEvent是原生的js event,如果浏览器是兼容或者是在可触的设备上使用,API通常是暴漏给event.originalEvent。简单来说,event.originalEvent会根据触发时间类型和浏览器运行环境表现不一。

举个例子:

var files = event.dataTransfer.files; // Gives error: trying to get property of undefined

var files = event.originalEvent.dataTransfer.files; // Works fine

jquery没有封装原生event对象的一些API,就行例子中的files。所以在这种时候我们需要使用event.originalEvent。

3.触摸事件

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件:

1. touchstart :手指放在一个DOM元素上。
2. touchmove :手指拖曳一个DOM元素。
3. touchend :手指从一个DOM元素上移开。

每个触摸事件都包括了三个触摸列表:

1. touches :当前位于屏幕上的所有手指的一个列表。
2. targetTouches :位于当前DOM元素上的手指的一个列表。
3. changedTouches :涉及当前事件的手指的一个列表。

例如,在一个touchend事件中,这就会是移开的手指。

这些列表由包含了触摸信息的对象组成:

1. identifier :一个数值,唯一标识触摸会话(touch session)中的当前手指。
2. target :DOM元素,是动作所针对的目标。
3. 客户/页面/屏幕坐标 :动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle :画出大约相当于手指形状的椭圆形。

jQuery Mobile 实现苹果滑动删除闹钟功能的几点总结的更多相关文章

  1. JQuery Mobile实现手机新闻浏览器(2)

    在上一篇文章中,已经讨论了程序的结构和页面的布局,并简单介绍了一些jQuery Mobile的使用技巧.在本篇文章中,笔者将继续完成我们web应用的新闻浏览器的设计. 程序的启动 我们现在来研究一下程 ...

  2. jquery mobile多页面跳转等,data-ajax="false" 问题,

    当我们的网站引用了jquery mobile的js后,点击页面的链接,你会发现页面无法跳转,因为jquery mobile默认是采用ajax方式来加载网站的,如果你需要跳到另一个页面,需要在a标签加上 ...

  3. jquery Mobile应用第2课《构建跨平台APP:jQuery Mobile移动应用实战》连载二(简单的QWER键盘)

    在jQuery Mobile的布局中,控件大多都是单独占据页面中的一行,按钮自然也不例外,但是仍然有一些方法能够让多个按钮组成一行,比如说在范例6-5中就利用按钮分组的方法使4个按钮并列在一行中,如图 ...

  4. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  5. Jquery Mobile左右滑动效果

    首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...

  6. 自定义listView添加滑动删除功能

    今天研究了一下android里面的手势,结合昨天学习的自定义View,做了一个自定义的listview,继承自listView,添加了条目的滑动手势操作,滑动后出现一个删除按钮,点击删除按钮,触发一个 ...

  7. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  8. jQuery mobile 滑动打开面板

    一.首先在<head></head>里面引入jQuery库.jQuery mobile库以及jQuery mobile样式 <link rel="stylesh ...

  9. Android滑动删除功能

    今天学习了新的功能那就是滑动删除数据.先看一下效果 我想这个效果大家都很熟悉吧.是不是在qq上看见过这个效果.俗话说好记性不如赖笔头,为了我的以后,为了跟我一样自学的小伙伴们,我把我的代码粘贴在下面. ...

随机推荐

  1. 洛谷P4312 [COCI 2009] OTOCI / 极地旅行社(link-cut-tree)

    题目描述 不久之前,Mirko建立了一个旅行社,名叫“极地之梦”.这家旅行社在北极附近购买了N座冰岛,并且提供观光服务. 当地最受欢迎的当然是帝企鹅了,这些小家伙经常成群结队的游走在各个冰岛之间.Mi ...

  2. tomcat下manager配置

    1 安装Tomcat前需要先安装JDK.安装Tomcat后测试Tomcat成功安装. Tomcat Manager是Tomcat自带的.用于对Tomcat自身以及部署在Tomcat上的应用进行管理的w ...

  3. XEvent--Demo--使用XEvent来捕获在数据库DB1上发生的锁请求和锁释放

    --==============================================================--使用XEvent来捕获在数据库DB1上发生的锁请求和锁释放--=== ...

  4. eayui js动态加载Datagrid,自适应宽度,高度

    HTML: <div class="easyui-layout" style="min-height:100%;min-width:100%;"> ...

  5. 流与文本文件操作(C#)

    1.流的基本概念 流是任何输入输出库的必不可少的组成部分.当你的程序需要从一个外部数据源(比如,files.other PCs或servers等)读或者写数据时,就需要用到流streams. 流是由一 ...

  6. 【cocos2d-x 手游研发小技巧(5)获取网络图片缓存并展示】

    今天是年前最后一天上班了,最后一天上班,祝大家马上有各种东西,最后一天也给写一点干货,就是获取网络图片: 经过自己简单封装了一下,实现了获取网络图片,按照比例展示出来,实现方法是cocos2dx - ...

  7. Android Studio显示可视化编辑界面

    选中项目,依次展开“src/main/res/layout",双击"activity_main.xml",这样右侧就有“preview”选项卡了,点击activity_m ...

  8. iOS Socket编程(一)基本概念

    1.Socket的解释 Socket翻译过来中文称为套接字, 这里我找到了一段比较官方的解释Socket是什么东西: Socket是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元,包含进行 ...

  9. 洛谷P4069 [SDOI2016]游戏(李超线段树)

    题面 传送门 题解 如果我们把路径拆成两段,那么这个路径加可以看成是一个一次函数 具体来说,设\(dis_u\)表示节点\(u\)到根节点的距离,那么\((x,lca)\)这条路径上每个节点的权值就会 ...

  10. 把redhat源换成centos的,解决redhat未注册不能下载相关软件的问题

      修改 vim /etc/yum.repos.d/centos-base.repo如下,清华源地址为  https://mirrors.tuna.tsinghua.edu.cn/help/cento ...