Talk about Jquery Touch
2016-10-16 00:45
190 查看
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 !
.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 char * const p & char const *p
- Let's talk about search engine...
- Something about jQuery Mobile
- [forward]something about multitouch
- talk about read the books
- 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:
- talk about the senseless
- Talk some about ACM competition
- 手机的touch事件(基于jquery)
- Get the First Touch on JQuery
- talk about embedded development during first 3 days
- The first talk about what is Quartz.Net
- jQuery -- touch事件之轮播图效果
- INSTALL_FAILED_OLDER_SDK (continue talk about it)
- Talk about the structure of a html page
- jquery.roundabout.js实现3D图片层叠旋转木马切换
- DAY09_QIXI talk about brain_hole
- jQuery系列(一) -- touch jQuery
- something talk about lock from FreeBSD mail list
- about springmvc intergation jquery with ajax &no-ajax version