CrossBrowdy - Basic tutorial

Input

Touch and gestures

Here is an example of touch management with CrossBrowdy:


	//Some useful functions:
	var maxTouchPointsOrNull = CB_Touch.getMaxTouchPoints(); //Maximum of touch points supported by the device (or null if it was not possible to calculate).
	var myBoolean = CB_Touch.delay(250); //First time, it will return true.
	var myBoolean_2 = CB_Touch.delay(); //Next calls, returns false if the defined time (250 milliseconds) did not expire yet (and first parameter would be ignored) or true otherwise (and will act as the first time again).
	
	//Managing touch events (use "null" as the first parameter to remove them):
	//Note: the pressure will be tried to be calculated automatically and added to the "force" property of the touch event object received by all the touch events.
	CB_Touch.onCancel(function(e) { CB_console("The 'onCancel' event was fired!"); });
	CB_Touch.onEnd(function(e) { CB_console("The 'onEnd' event was fired!"); });
	CB_Touch.onEnter(function(e) { CB_console("The 'onEnter' event was fired!"); });
	CB_Touch.onLeave(function(e) { CB_console("The 'onLeave' event was fired!"); });
	CB_Touch.onMove(function(e) { CB_console("The 'onMove' event was fired!"); });
	CB_Touch.onStart(function(e) { CB_console("The 'onStart' event was fired!"); });
	var lastTouchEventObjectOrNull = CB_Touch.getData(); //Touch event object received by the last touch event fired, if it was "onTouchStart", "onTouchEnter" or "onTouchMove". The "onTouchEnd" and "onTouchLeave" events set it to "null".

Note that the CB_Touch.delay function can be useful, for example, to prevent the onTouchStart event to fire twice or more when a layer (container) is closed and behind there is another one with also the onTouchStart event.

Gestures and pressure can also be managed thanks to the Hammer.js and Pressure.js libraries:


	//Gets the Hammer.js object (if any), useful for managing touch gestures:
	var HammerJSObject = CB_Touch.getHammerJSObject();
	//Do things with 'HammerJSObject'...
	
	//Gets the Pressure.js object (if any), useful for managing Force Touch/3D Touch and Pointer Pressure features:
	var PressureJSObject = CB_Touch.getPressureJSObject();
	//Do things with 'PressureJSObject'...
Read the documentation of the Hammer.js and Pressure.js libraries to get more information about how to use them.

It is important to have into account that pressure will be tried to be calculated automatically and added to the "force" property of the touch event object received by all the touch events managed by CrossBrowdy. So, for common usage, it is very likely that you do not need to use the CB_Touch.getPressureJSObject function at all.

Check the API documentation to read more about the CB_Touch static class.

Go back to Guides & Tutorials

« PrevReturnNext »
CrossBrowdy by Joan Alba Maldonado