Input
Mouse, Touch and Pointer
An example managing mouse, touch and pointer:
<!DOCTYPE html>
<html>
<head>
<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="canonical" href="https://crossbrowdy.com/examples/input/mouse_touch_and_pointer/try" />
<title>Input: Mouse, Touch and Pointer - Example</title>
<!-- Loads the needed CSS files: -->
<link rel="stylesheet" type="text/css" href="main.css" />
<!-- Loads CrossBrowdy.js (main file): -->
<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
<!-- Loads the other needed script files: -->
<script src="main.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="screen_selector">
Choose screen:
<span class="screen_selector_option" onClick="displayScreen('mouse');">Mouse</span>
-
<span class="screen_selector_option" onClick="displayScreen('touch');">Touch</span>
-
<span class="screen_selector_option" onClick="displayScreen('pointer');">Pointer</span>
</div>
<div id="mouse_information">
<div id="mouse_lock_element">Element where the mouse will be locked</div>
<h3>Mouse information:</h3>
Coordinates: <span id="mouse_coordinates"></span><br />
Coordinates (locked movement): <span id="mouse_coordinates_lock"></span><br />
Buttons: <span id="mouse_buttons"></span><br />
Penultimate event: <span id="mouse_penultimate_event"></span><br />
Last event: <span id="mouse_last_event"></span><br />
<br />
<button onClick="mouseLockUnlock();">Lock/Unlock mouse</button><br />
<br />
<button onClick="mouseHide();">Hide mouse cursor</button> (press click anywhere to restore it)<br />
<br />
Using CSS to change mouse cursor aspect. Cursor image format support will depend on the client:
<br />
<button onClick="mouseChangeCursor('png');">Change cursor (PNG)</button><br />
<br />
<button onClick="mouseChangeCursor('GIF');">Change cursor (GIF)</button><br />
<br />
<button onClick="mouseChangeCursor('CUR');">Change cursor (CUR)</button><br />
<br />
<button onClick="mouseChangeCursor('ANI');">Change cursor (ANI)</button><br />
<br />
Using DHTML to change (and move) mouse cursor aspect (press click anywhere to stop it). Performance will be compromised:
<br />
<button onClick="mouseChangeCursorDHTML();">Change cursor by DHTML (animated GIF)</button><br />
<br />
<button onClick="mouseChangeCursorDHTMLSprites();">Change cursor by DHTML (sprites animation)</button><br />
</div>
<div id="touch_information">
<h3>Touch information:</h3>
Maximum touch points: <span id="touch_max_touch_points"></span><br />
Penultimate event: <span id="touch_penultimate_event"></span><br />
Last event: <span id="touch_last_event"></span><br />
Touch points information:
<br />
<span id="touch_points"></span><br />
</div>
<div id="pointer_information">
<h3>Pointer information:</h3>
Coordinates: <span id="pointer_coordinates"></span><br />
Penultimate event: <span id="pointer_penultimate_event"></span><br />
Penultimate event object: <span id="pointer_penultimate_event_information"></span><br />
Last event: <span id="pointer_last_event"></span><br />
Last event object: <span id="pointer_last_event_information"></span>
</div>
<br />
<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/input/mouse_touch_and_pointer" target="_blank">CrossBrowdy.com example</a></div>
</body>
</html>
/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }
button { color:#006600; }
button:hover { color:#660000; cursor:pointer; cursor:hand; }
#mouse_lock_element { position:absolute; top:50px; right:0px; width:20%; height:50%; background-color:#aa99dd; }
#screen_selector { font-size:24px; }
.screen_selector_option { color:#00aa00; }
.screen_selector_option:hover { color:#00aacc; cursor:pointer; cursor:hand; }
#mouse_information, #touch_information, #pointer_information { visibility:hidden; display:none; }
p.point_data { font-size:8px; color:#aa22aa; }
/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */
CB_init(main); //It will call the "main" function when ready.
//This function will be called when CrossBrowdy is ready:
function main()
{
//Starts showing the mouse information:
showMouseInformation();
//Setting mouse events:
CB_Mouse.onMove(function(e) { showMouseEventsInformation("Mouse moved!"); });
CB_Mouse.onWheel(function(e) { showMouseEventsInformation("Mouse wheel used!"); });
CB_Mouse.onButtonDown(function(e) { showMouseEventsInformation("Button down!"); });
CB_Mouse.onButtonUp(function(e) { showMouseEventsInformation("Button up!"); });
CB_Mouse.onClick(function(e) { showMouseEventsInformation("Click!"); });
CB_Mouse.onDblClick(function(e) { showMouseEventsInformation("Double click!"); });
CB_Mouse.onLeave(function(e) { showMouseEventsInformation("The 'onLeave' event was fired!"); });
CB_Mouse.onOut(function(e) { showMouseEventsInformation("The 'onOut' event was fired!"); });
CB_Mouse.onOver(function(e) { showMouseEventsInformation("The 'onOver' event was fired!"); });
CB_Mouse.onLockChange(function(e) { showMouseEventsInformation("Lock status changed!"); });
CB_Mouse.onLockError(function(e) { showMouseEventsInformation("Lock error!"); });
//Starts showing touch information:
var maxTouchPoints = CB_Touch.getMaxTouchPoints(); //Maximum of touch points supported by the device (or null if it was not possible to calculate).
CB_Elements.insertContentById("touch_max_touch_points", maxTouchPoints || "Unknown");
showTouchInformation();
//Setting touch events:
//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) { showTouchEventsInformation("The 'onCancel' event was fired!"); });
CB_Touch.onEnd(function(e) { showTouchEventsInformation("The 'onEnd' event was fired!"); });
CB_Touch.onEnter(function(e) { showTouchEventsInformation("The 'onEnter' event was fired!"); });
CB_Touch.onLeave(function(e) { showTouchEventsInformation("The 'onLeave' event was fired!"); });
CB_Touch.onMove(function(e) { showTouchEventsInformation("The 'onMove' event was fired!"); });
CB_Touch.onStart(function(e) { showTouchEventsInformation("The 'onStart' event was fired!"); });
//Setting pointer events:
CB_Pointer.onDown(function(e) { showPointerEventsInformation("The 'onDown' event has been fired!", e); });
CB_Pointer.onUp(function(e) { showPointerEventsInformation("The 'onUp' event has been fired!", e); });
CB_Pointer.onMove(function(e) { showPointerEventsInformation("The 'onMove' event has been fired!", e); });
CB_Pointer.onOver(function(e) { showPointerEventsInformation("The 'onOver' event has been fired!", e); });
CB_Pointer.onOut(function(e) { showPointerEventsInformation("The 'onOut' event has been fired!", e); });
CB_Pointer.onEnter(function(e) { showPointerEventsInformation("The 'onEnter' event has been fired!", e); });
CB_Pointer.onLeave(function(e) { showPointerEventsInformation("The 'onLeave' event has been fired!", e); });
CB_Pointer.onCancel(function(e) { showPointerEventsInformation("The 'onCancel' event has been fired!", e); });
CB_Pointer.onGotPointCapture(function(e) { showPointerEventsInformation("The 'onGotPointCapture' event has been fired!", e); });
CB_Pointer.onLostPointCapture(function(e) { showPointerEventsInformation("The 'onLostPointCapture' event has been fired!", e); });
//Displays the default screen (mouse information) at the beginning:
displayScreen(maxTouchPoints ? "touch" : "mouse");
}
//Displays the desired screen:
var screens = ["mouse", "touch", "pointer"];
function displayScreen(screen)
{
var element;
for (var x = 0; x < screens.length; x++)
{
element = CB_Elements.id(screens[x] + "_information");
if (element === null) { continue; }
if (screens[x] === screen) { element.style.visibility = "visible"; element.style.display = "block"; }
else { element.style.visibility = "hidden"; element.style.display = "none"; }
}
}
//Shows the mouse information constantly:
function showMouseInformation()
{
//Updates some mouse information:
CB_Elements.insertContentById("mouse_coordinates", CB_Mouse.getX() + ", " + CB_Mouse.getY());
CB_Elements.insertContentById("mouse_coordinates_lock", CB_Mouse.getXMovement() + ", " + CB_Mouse.getYMovement());
CB_Elements.insertContentById("mouse_buttons", JSON.stringify(CB_Mouse.getButtons()));
//Changes the background colour of the desired element when the mouse is over it:
var backgroundColor = "#aa99dd";
var element = CB_Elements.id("mouse_lock_element");
if (CB_Mouse.isOverElement(element)) { backgroundColor = "#aa0000"; } //For advanced collisions, the CB_Collisions static class can be used.
element.style.backgroundColor = backgroundColor;
//Calls itself again:
setTimeout(showMouseInformation, 1);
}
//Shows mouse events information:
function showMouseEventsInformation(message)
{
//Updates mouse events information:
CB_Elements.insertContentById("mouse_penultimate_event", CB_Elements.id("mouse_last_event").innerHTML);
CB_Elements.insertContentById("mouse_last_event", message);
}
//Locks/unlocks the mouse:
function mouseLockUnlock()
{
if (CB_Mouse.isLocked()) { mouseUnlock(); }
else { mouseLock(); }
}
//Locks the mouse:
function mouseLock()
{
//Pointer Lock API management:
if (CB_Mouse.isLockSupported())
{
CB_console("Pointer Lock API is supported.");
//Some examples:
var element = CB_Elements.id("mouse_lock_element"); //Equivalent to document.getElementById("my_element").
var elementLock = //Locked element can also be obtained with the 'CB_Mouse.getLockElement' function.
CB_Mouse.lock
(
//Element to lock the mouse to:
element,
//Callback when lock is performed successfully:
function() { CB_console("Mouse locked!"); },
//Callback when lock is not performed successfully:
function() { CB_console("Mouse could not be locked!"); }
);
}
else
{
CB_console("Pointer Lock API is not supported.");
}
}
//Unlocks the mouse:
function mouseUnlock()
{
CB_Mouse.unlock(); //Unlocks the mouse.
}
//Hides the mouse cursor:
function mouseHide()
{
CB_console("Hiding mouse cursor...");
CB_Mouse.hide(); //Hides the cursor. Useful to simulate the Pointer Lock API.
CB_Mouse.onButtonUp(mouseRestore);
}
//Restores (shows again) the mouse cursor:
function mouseRestore()
{
CB_console("Restoring mouse cursor...");
CB_Mouse.restore(); //Hides the cursor. Useful to simulate the Pointer Lock API.
}
//Changes the cursor aspect (using CSS internally):
function mouseChangeCursor(extension)
{
var CSS = "url(cursors/cursor." + extension + "), auto";
CB_Mouse.setCSS(CSS);
}
//Changes the cursor aspect (using DHTML internally):
function mouseChangeCursorDHTML()
{
CB_console("Using DHTML to fake the mouse cursor...");
var cursorImage = "ranisima.gif"
var cursorImageWidth = 40;
var cursorImageHeight = 40;
CB_Mouse.CursorImage.set(true, "cursors/" + cursorImage, cursorImageWidth, cursorImageHeight);
CB_Mouse.onButtonUp(mouseChangeCursorDHTMLStop);
}
//Changes the cursor aspect (using DHTML internally), using a sprites-based animation:
function mouseChangeCursorDHTMLSprites()
{
CB_console("Using DHTML to fake the mouse cursor (using sprites)...");
var cursorImage = "bird_sprites.gif";
var cursorImageWidth = 38;
var cursorImageHeight = 36;
var numberOfFrames = 4;
var framesMs = 10;
CB_Mouse.CursorImage.set(true, "cursors/" + cursorImage, cursorImageWidth, cursorImageHeight, true, true, numberOfFrames, framesMs);
CB_Mouse.onButtonUp(mouseChangeCursorDHTMLStop);
}
//Stops using DHTML to fake the cursor aspect:
function mouseChangeCursorDHTMLStop()
{
if (CB_Mouse.CursorImage.isShowing())
{
CB_console("Stops using DHTML to fake the mouse cursor (using sprites).");
CB_Mouse.CursorImage.hide();
}
}
//Shows the mouse information constantly:
var touchProperties = [ "targetTouches", "touches", "changedTouches" ]; //Different point groups.
function showTouchInformation()
{
var lastTouchEventObject = 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".
//Updates touch information:
if (lastTouchEventObject !== null && lastTouchEventObject.touches)
{
var data = "", y, points, point;
for (x = 0; x < touchProperties.length; x++)
{
points = lastTouchEventObject[touchProperties[x]];
if (!points) { continue; }
data += touchProperties[x] + " (" + points.length + "):";
for (y = 0; y < points.length; y++)
{
point = points[y];
data += '<p class="point_data">{ ';
data += "Identifier: " + point.identifier + ", ";
data += "screenX: " + point.screenX + ", ";
data += "screenY: " + point.screenY + ", ";
data += "clientX: " + point.clientX + ", ";
data += "clientY: " + point.clientY + ", ";
data += "pageX: " + point.pageX + ", ";
data += "pageY: " + point.pageY + ", ";
data += "target: " + point.target + ", ";
data += "radiusX: " + point.radiusX + ", ";
data += "radiusY: " + point.radiusY + ", ";
data += "rotationAngle: " + point.rotationAngle + ", ";
data += "force: " + point.force;
data += " }</p>";
}
}
CB_Elements.insertContentById("touch_points", data);
}
else
{
CB_Elements.insertContentById("touch_points", "No data");
}
//Calls itself again:
setTimeout(showTouchInformation, 1);
}
//Shows touch events information:
function showTouchEventsInformation(message)
{
//Updates touch events information:
CB_Elements.insertContentById("touch_penultimate_event", CB_Elements.id("touch_last_event").innerHTML);
CB_Elements.insertContentById("touch_last_event", message);
}
//Shows pointer events information:
function showPointerEventsInformation(message, e)
{
//Updates mouse events information:
var data = "{ ";
data += "pointerId: " + e.pointerId + ", ";
data += "pointerType: " + e.pointerType + ", ";
data += "currentTarget: " + e.currentTarget + ", ";
data += "isPrimary: " + e.isPrimary + ", ";
data += "pressure: " + e.pressure + ", ";
data += "tangentialPressure: " + e.tangentialPressure + ", ";
data += "width: " + e.width + ", ";
data += "height: " + e.height + ", ";
data += "twist: " + e.twist + ", ";
data += "tiltX: " + e.tiltX + ", ";
data += "tiltY: " + e.tiltY + ", ";
data += "clientX: " + e.clientX + ", ";
data += "clientY: " + e.clientY + ", ";
data += "pageX: " + e.pageX + ", ";
data += "pageY: " + e.pageY + ", ";
data += "usingEmulation: " + e.usingEmulation + ", ";
data += "type: " + e.type + ", ";
data += "typeEmulated: " + e.typeEmulated;
data += " }";
CB_Elements.insertContentById("pointer_penultimate_event", CB_Elements.id("pointer_last_event").innerHTML);
CB_Elements.insertContentById("pointer_last_event", message);
CB_Elements.insertContentById("pointer_penultimate_event_information", CB_Elements.id("pointer_last_event_information").innerHTML);
CB_Elements.insertContentById("pointer_last_event_information", data);
}
Additional files used (inside the "cursors" folder): cursor.ani, cursor.cur, cursor.gif, cursor.png, ranisima.gif and bird_sprites.gif.
You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.
All the examples together can be downloaded here.