Share via


onmsgesturehold event

Fires when the user touches a surface and holds the position for an extended period of time.

 

Syntax

HTML Attribute <element onmsgesturehold = "handler(event)">
addEventListener Method object.addEventListener("MSGestureHold", handler, useCapture)

 

Event handler parameters

  • handler [in]
    Type: Function

    Function name to execute when the event is fired.

Remarks

The onmsgesturehold event has three states, MSGESTURE_FLAG_BEGIN, MSGESTURE_FLAG_END, and MSGESTURE_FLAG_CANCEL that are returned by the IDOMUIEvent::detail property. When a user first touches the surface, the onmsgesturehold event and the IDOMUIEvent::detail property equals MSGESTURE_FLAG_BEGIN. If the user removes the contact, IDOMUIEvent::detail returns MSGESTURE_FLAG_END. If the user moves their finger, whether they lift it or not, the IDOMUIEvent::detail property returns MSGESTURE_FLAG_END && MSGESTURE_FLAG_CANCEL, allowing the developer to differentiate between a simple hold and release, and sliding the finger from the object.

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.

 

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

HTMLFrameSiteEvents::oncontextmenu

onmsgesturestart

onmsgestureend

onmsinertiastart

Gesture flags