IPhone Web development touch events

IPhone Web developmentTouchEventThis is what we will introduce. Of course, your iPhone uses your fingers instead of the mouse. Also, you can touch and knock with some fingers. ThereforeIPhoneUp, mouseEventTouchedEventInstead. These mouseEventInclude:

Touchstart

Touchend

Touchmove

Touchcancel when the system cancels the touch)

If you subscribe to any of these events, your event listener will receive an event object. It has some important attributes, such:

* Touches-a set of touch objects, one-to-one with the fingers that touch the screen. The Touch object has the pageX and pageY attributes to contain the coordinates of the touch on the page.

* TargetTouches-a set of touch targets. Unlike a set of touch objects, targetTouches only acts on the target elements of the Object Storage, rather than the entire page.

The following example shows a simple drag-and-drop implementation. Let's draw a box on the black background page and drag it down. Now you have to subscribe to the touchmove event and update the position of the box when the finger moves, like this:

 
 

  
  
window.addEventListener('load', function() {    
  
  
 var b = document.getElementById('box'),  
  
  
     xbox = b.offsetWidth  / 2, // half the box width  
  
  
     ybox = b.offsetHeight / 2, // half the box height  
  
  
     bbstyle = b.style; // cached access to the style object    
  
  
 b.addEventListener('touchmove', function(event) {  
  
  
   event.preventDefault(); // the default behaviour is scrolling  
  
  
   bstyle.left =  event.targetTouches[0].pageX - xbox + 'px';  
  
  
   bstyle.top  =  event.targetTouches[0].pageY - ybox + 'px';  
  
  
 }, false);    
  
  
}, false); 
 
 

TouchmoveEventThe listener first removes the default behavior of finger movement-otherwise Safari will scroll the page. The event.tar getTouches set contains a list of data of all fingers on the div element. Now we only need to care about one finger, so we use event.tar getTouches [0]. Then, pageX tells the X coordinate of the finger. If you subtract half of the div width from this value, it is the middle of the box.

Summary: DetailsIPhone Web developmentTouchEventI hope this article will help you.