onmspointerdown event
Event that is triggered when a contact touches the screen on element.
.png){kind=icon} |
Syntax
| HTML Attribute | <element onmspointerdown = "handler(event)"> |
| addEventListener Method | object.addEventListener("MSPointerDown", handler, useCapture) |
Event handler parameters
handler [in]
Type: FunctionFunction name to be executed when the event is triggered.
Remarks
The pointerId from the this event is passed to an MSGesture object to enable the element to receive MSGestureEvents, such as onmsgesturetap or onmsgesturestart.
Note For more information about controlling touch behavior and using multi-touch, see Guidelines for Building Touch-friendly Sites.
Note This item described in this topic requires Windows 8.
You can identify the type of pointer that fired the event by looking at the pointerType property value. The following example differentiates between touch only input and other input:
elm.addEventListener("MSPointerDown",handleDown,false);
function handleDown(evt) {
if(evt.pointerType == evt.MSPOINTER_TYPE_TOUCH) {
// Do something for touch input only
}else{
// Do something for non-touch input
}
}
Examples
The following is a complete sample that enables you to interact with the screen and see the specific gesture events that are fired. Try tapping and swiping your finger or mouse on the red or blue regions and view the events that are listed.
<!DOCTYPE html >
<html>
<head>
<title>Gesture Event Firing test</title>
<style type="text/css">
.display
{
/* Block areas from being selected */
-ms-user-select: none;
}
body
{
/* Block area from manipulation actions (zoom, pan) */
touch-action: none;
}
</style>
<script type="text/javascript">
var messageId = 0;
var redGesture, blueGesture;
var redElement, blueElement;
function printMessage(str)
{
var element = document.getElementById("output");
messageId++;
element.value += formatMessage(messageId + ":", 4) + str;
element.scrollTop = element.scrollHeight;
element = document.getElementById("eventCount");
element.innerHTML = messageId;
}
function formatMessage(str, len)
{
var formattedMessage = null;
if (str != null)
{
var formattedMessage = str.toString();
formattedMessage += " ";
for (var idx = formattedMessage.length; idx < len; idx++)
{
formattedMessage += " ";
}
}
return formattedMessage;
}
function onLoad() {
// Create gesture event listeners for each <div> element
prepareTarget("Red", redListener);
prepareTarget("Blue", blueListener);
// Create MSGesture object 1 (red <div>)
redGesture = new MSGesture();
redElement = document.getElementById("Red");
redGesture.target = redElement;
// Create MSGesture object 2 (blue <div>)
blueGesture = new MSGesture();
blueElement = document.getElementById("Blue");
blueGesture.target = blueElement;
}
// Add gesture events to an element and point at a specific function
function prepareTarget(targetId, eventListener)
{
var target = document.getElementById(targetId);
target.addEventListener("MSGestureStart", eventListener, false);
target.addEventListener("MSGestureEnd", eventListener, false);
target.addEventListener("MSGestureChange", eventListener, false);
target.addEventListener("MSInertiaStart", eventListener, false);
target.addEventListener("MSGestureTap", eventListener, false);
target.addEventListener("MSGestureHold", eventListener, false);
target.addEventListener("pointerdown", eventListener, false);
}
function printEvent(evt)
{
var str =
formatMessage(evt.type, 16) +
formatMessage(evt.screenX, 6) +
formatMessage(evt.screenY, 6) +
formatMessage(evt.clientX.toFixed(0), 6) +
formatMessage(evt.clientY.toFixed(0), 6) +
formatMessage(evt.translationX.toFixed(2), 8) +
formatMessage(evt.translationY.toFixed(2), 8) +
formatMessage(evt.scale.toFixed(2), 7) +
formatMessage(evt.rotation.toFixed(2), 7) +
formatMessage(evt.detail, 5) +
formatMessage(evt.currentTarget.id, 10) +
formatMessage(evt.srcElement.id, 10) +
"\n";
printMessage(str);
evt.stopPropagation();
}
// Reset the gesture object
function reset()
{
printMessage("Reset gesture\n");
redGesture.reset();
blueGesture.reset();
}
// Adds a pointer to the MSGesture object for the red square
function redListener(evt)
{
if (evt.type == "pointerdown")
{
redGesture.addPointer(evt.pointerId);
return;
}
printEvent(evt);
}
// Adds a pointer to the MSGesture object for the blue square
function blueListener(evt)
{
if (evt.type == "pointerdown") // add pointer on pointerdown event
{
blueGesture.addPointer(evt.pointerId);
return;
}
printEvent(evt); // Otherwise pass on event
}
function clearMessages(evt)
// Clear the list of gesture messages
{
var results = document.getElementById("output");
results.innerHTML = "";
messageId = 0;
results = document.getElementById("eventCount");
results.innerHTML = messageId;
}
</script>
</head>
<body id = "page" onload="onLoad()">
<!-- Elements to try out gestures -->
<div class= "display" id="Red" style="position: relative; top: 0px; left: 0px; width: 300px; height: 250px; background-color: red"></div>
<div class= "display" id="Blue" style="position: absolute; top: 10px; left: 350px; width: 300px; height: 250px; background-color: blue"></div>
<div class= "display" id="control" style="position: absolute; top: 50px; left: 750px; width: 300px; height: 250px;">
<button onclick=clearMessages()>Clear Messages</button>
<br />
<p>Gesture Event Count: <span id="eventCount"></span></p>
</div>
<strong><pre><font size="2" face="Courier">
Type ScrX ScrY CliX CliY TrnX TrnY Scal Rotn Det Current Source
<textarea id=output rows="18" cols="140" wrap="off" readonly="readonly" ></textarea>
</font></pre></strong>
</body>
</html>
See also
DOM pointer and gesture event handling sample
IHTMLCSSStyleDeclaration2::msTouchAction