Talk about Jquery Touch
来源:互联网 发布:淘宝几个好评一个心 编辑:程序博客网 时间:2024/06/06 07:11
When first time I got to learn about web ,I thought it is just run in browsers .But one day ,I was told to build a web page which can run in mobile browsers .At that moment ,I thought it doesn't make any difference with PC browsers .So I started quickly .And I built the page and ran it .Boom...There are some problems in the mobile browser : the 'click' event doesn't work ,the 'click' event is trigger twice sometimes and the list doesn't go fluently when you scroll it .
So I knew something's wrong .I recognized that there are some differences between PC browsers and mobile browsers in some events like click ,scroll or touch .So I was about to fix it .
First ,click .Why it doesn't go well when you touch to trigger click event ?Here is the thing .The click event is more like suitable for cursor ,but when we touch the screen ,the event we did is called touch .There are differences .And if we bind the click event to the HTML element maybe the button but we touch it ,it will call the touch event first ,but we declare nothing with the touch event ,so nothing will happen .In Jquery ,the event will be handled by the element's parents which triggered it but not declare it .So the event will be passed to the parents and handled .So sometimes it will look like the function is called twice when you touch .'Cause you didn't stop the event passing to the parents .Let's check the code .
$('.myButton').on('touch click', function(event){ if(event.handled !== true) { //do the thing event.handled = true; } else { return false; } });That's it .It will go very well without those problems .
Second ,scroll .When I scrolled my list in the mobile screen ,it looks like the list was seized up a little bit .Anyway it didn't go very well .But the point is I have add the "overflow: scroll;" to the list css attributes .But nothing changed .So I looked out and found a solution .
overflow-y: scroll;-webkit-overflow-scrolling: touch;These two lines code are added to the list css .The first for the PC and the second for the mobile .
I got to say that is my little thing which is maybe not 100% right and I hope it will help you .Have a good day~Good night !
- Talk about Jquery Touch
- Talk About“Upcasting”
- Talk about porting
- talk about pass4sure exams
- talk about Qt
- Talk about VARIANT
- Talk About Past Experience
- DAY09_QIXI talk about brain_hole
- TO TALK ABOUT CHINA MEDIA
- Talk About“Upcasting”[翻译后]
- Talk some about ACM competition
- INSTALL_FAILED_OLDER_SDK (continue talk about it)
- Talk about ReactNative Image Component
- OK, let's talk about ASUS
- Let's talk about search engine...
- boring、talk about、how long、accompany
- Let's Talk About project.pbxproj
- HOW TO TALK ABOUT DOCTORS学习笔记
- Javascript面向对象编程(三):非构造函数的继承
- 经验_硬件_RL电路_传函
- Mac Osx 下 学习 lisp
- Maven的简单使用
- Hibernate4自学入门(六)—— 常用对象和方法
- Talk about Jquery Touch
- 《MySql 必知必会》16-20
- MaterialDesign--SnackBar
- 使用IntelliJ IDEA 13搭建Android集成开发环境(图文教程)
- FloydWarshall 算法包含BellmanFord 和Dijkstra算法求单元最短路SSSP,可以有负权,有圈
- 设计模式之建造者模式-----高上
- Android 去除ActionBar:
- java 内存溢出
- Verilog 编程实验(5)-3-8线译码器的设计与实现