iOS, you should discard the traditional interactive event model and accept a new event model. Touch events and more advanced gesture events allow your Web pages to interact like native apps.There are three basic touch events that are listed in the specification and have been widely implemented across mobile devices:1. Touchstart: Place your finger on a DOM element.2. touchmove: Drag a DOM element with your finger.3. touchend: Move the finger away fro
: Touch-purpose DOM node destination.
The above property light so to see, it is very cumbersome, each attribute is so meticulous, only the real gun to a small example to understand more about the mystery. So the small example is as follows.
JavaScript code
Copy Code code as follows:
function Load () {
Document.addeventlistener (' Touchstart ', touch,false);
Document.addeventlistener (' T
Phantom Limb, which simulates touch events on a Web page and provides a giant hand to guide it.There's also touchable, a jquery plugin that unifies touch and mouse events across platforms. Multi-Touch eventsTo make your multi-touch web app work on your browser or multi-touch trackpad (like Apple MacBook or Magicpad), I created this magictouch.js fill tool that captures touch events from the trackpad, They are then converted to standard-compatible touch events.1. Download the nptuioclient Npapi
/directory.2. Download the Tongseng Tuio app for this Mac Magicpad and start the server.3. Download the magictouch.js JavaScript Library to emulate the specification-compliant touch events based on the Nptuioclient callback.4. Include the Magictouch.js script and the Nptuioclient plugin in your app as follows:......Touch Input plugin failed to load!I only tested this method on Chrome 10, but it should be able to work on other modern browsers as long a
/directory.2. Download the Tongseng Tuio app for this Mac Magicpad and start the server.3. Download the magictouch.js JavaScript Library to emulate the specification-compliant touch events based on the Nptuioclient callback.4. Include the Magictouch.js script and the Nptuioclient plugin in your app as follows:......Touch Input plugin failed to load!I only tested this method on Chrome 10, but it should be able to work on other modern browsers as long a
iOS, you should discard the traditional interactive event model and accept a new event model. Touch events and more advanced gesture events allow your Web pages to interact like native apps.There are three basic touch events that are listed in the specification and have been widely implemented across mobile devices:1. Touchstart: Place your finger on a DOM element.2. touchmove: Drag a DOM element with your finger.3. touchend: Move the finger away fro
HTML5 New added a lot of events, but because their compatibility problem is not very ideal, the application is not too strong, so basically omitted here, we only share the application of a wide range of compatible good events, and later with the compatibility of the promotion after the addition of sharing. The events today are mainly touch events: Touchstart, Touchmove and Touchend.The first touch events Touchstar
HTML5 New added a lot of events, but because their compatibility problem is not very ideal, the application is not too strong, so basically omitted here, we only share the application of a wide range of compatible good events, and later with the compatibility of the promotion after the addition of sharing. The events today are mainly touch events: Touchstart, Touchmove and Touchend.The first touch events Touchstar
Touch screen touchstart and click, touchstartclick
Design effect: When you click or touch a part other than the red box menuList, the pop-up box menuList disappears.
Problem: I found a problem when I optimized the touch screen version. When menuList pops up and my fingers slide down the screen, the menuList bullet box does not disappear. Only when I click a part other than menuList by my fingers.
Check the code and find that the source code only de
ANGULARJS Development Mobile End page, make mobile end page must be inseparable from, Touchstart, Touchmove, touchend these actions, but Angularjs provided Ng-touch module is not ngtouchstart this touch screen event , so that the click Delay, so today is the introduction of another Ng-touch written by foreign people, to achieve the mobile end of the Touchstart,touchmove,touchend these events used, as usual,
Touchstart event: Triggers when the finger touches the screen, even if a finger is already placed on the screen.
Touchmove event: Triggers continuously when the finger is sliding on the screen. During this event, calling the Preventdefault () event can prevent scrolling.
Touchend event: Triggers when the finger is left on the screen.
Touchcancel event: Triggered when the system stops tracking touch. The exact departure time for this event
Scene:We clicked on the mobile click event Click Compare Touchend there will be a noticeable 300ms delay, why?The browser waits about 300ms after clicking to determine if the user has a double-click behavior (the phone needs to know if you want to double-click to enlarge the Web content ).If there is no click in the 300ms, then it is determined that this is a single machine behavior. So we basically use (touchstart/touchend).However, these events will
Sliding screen Touchstart: triggered when touching the screen, Touchmove: Active process triggered, touchend: triggered when leaving the screenFirst get the coordinates x, y when the hand touches the screenGet x and Y when touching the screen$ ('body'). Bind ('touchstart', function (e) { = e.originalevent.changedtouches[0].pagex, = e.originalevent.changedtouches[0 ].pagey;});It then obtains the slidin
When we swipe the phone, if the Li or div tag can be clicked, then on the mobile side give the user an effect/*ID is the ID of the UL on the add effect Li, or the ID of the current DIV*/functiondotouchpublic (ID) {SetTimeout (function(){ varobj=document.getElementById (ID); Touchpublic.tagultagdiv (obj); },300); };varTouchpublic={tagultagdiv:function(obj) {varObjall; /*if the object is UL, add an event to Li, otherwise add an event to the Div current object*/ if(obj.tagname== "U
About these three mobile events, detailed information on the Internet a large search, I will not waste time1. Mobile End Long press eventvar NULL ; $ (ele). On (' Touchstart ',function() { = setTimeout (function() { Alert ("I am the long-press event!") ") }); $ (Ele). On (' touchend ',function() { cleartimeout (timer);});Description: Simulates a long-press event via a timer, this example is based on jquery, where "ele" is the element t
Label: blog Io ar Java SP Div on 2014 Art The sencha touch panel and container events do not contain click events, but sometimes we need to add click events to a panel. The specific implementation code is as follows.
Ext.getCmp('panel_id').element.on({ tap : function() { alert("你点击了panel"); }, touchstart:function(){ console.log("touch start......"); }, touchend:function(){
Sliding screen Touchstart: triggered when touching the screen, Touchmove: Active process triggered, touchend: triggered when leaving the screenFirst get the coordinates x, y when the hand touches the screenGet x and Y when touching the screen$ (' body '). Bind (' Touchstart ', function (e) { StartX = E.originalevent.changedtouches[0].pagex, starty = E.originalevent.changedtouches[0].pagey;});It then o
The first part of the code example:The second part of the code example: moving left and right sliding page switch test codeDocument.queryselector (". Page2"). AddEventListener ("Touchstart", Function (E1) {E1.preventdefault ();Console.log (E1)var touch1 = e1.touches[0];var StartX = Touch1.pagex;Document.queryselector (". Page2"). AddEventListener ("Touchmove", function (E2) {E2.stoppropagation ();var touch2 = e2.touches[0];var Xc = Touch2.pagex-startx
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.