locked
How to delegate gesture so I dont need to bind it to individual DOM element ? RRS feed

  • Question

  • hi,

    Here is the scenario..

    I want to delegate gesture(tap and hold - MSGestureHold) event on each child element but dont want to create new MSGesture() on individual child.

    These children are dynamic and so cant afford to bind gesture event to individual child. 

    Is there any way to delegate and bubble gesture to top level element(myDiv) like live(),delegate() and on() methods in jQuery.

    <section id="myDiv" style="width:100%;height:100%;border:1px solid #FF0000"> <div id="Div1" class="c2" style="height:40px;width:500px;border:1px solid #000000"></div> <div id="Div2" class="c3" style="height:40px;width:500px;border:1px solid #000000"></div> <div id="Div3" class="c4" style="height:40px;width:500px;border:1px solid #000000"></div>

    </section>

    Javascript code:

    var elem = document.getElementById("myDiv"); 
    var myGesture = new MSGesture();
    myGesture.target = elem;
    elem.gestureObject = myGesture;
            
    elem.addEventListener("MSGestureTap", onHoldBody);
    
    elem.addEventListener("MSGestureHold", handleHold,false);
    
    elem.addEventListener("MSPointerDown", PointerDown, false);

    A little help is appreciated..

    Thanks,

    {Web-Farmer}

    Monday, August 27, 2012 10:28 AM

Answers

  • I suppose you could go with some crazy logic, get the coordinate of the event and search the DOM for a child that contains that point.

    Personally, I would create the Gesture object.  Remember you don't need a different listener for each.  You can use the same listener function.  It is not a lot of work, especially if you are adding the elements dynamically, you are there anyhow... just add the 3 lines of code you need to wire it up!

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, August 28, 2012 1:19 PM
    Moderator

All replies

  • Hi Webby,

    You can simply only have the outer div add an event listener and don't bind the children.  If you delegated to the Body or other control, what do you intend to do with the information?

    RE: "These children are dynamic and so cant afford to bind gesture event to individual child. "  - What do you mean can't afford?  Most of the jQuery helpers simply iterate over the children or elements matching them and assigning things like event handlers (which you would do).  Also you can use jQuery!

    -Jeff


    Jeff Sanders (MSFT)

    Monday, August 27, 2012 6:02 PM
    Moderator
  • Hi Jeff,

    I have a data grid and on "tap and hold" gesture on a particular row,i want to perform some action on that row.

    So i want to know is there any way i can delegate event to top level container and then reading "target" property, i will distinguish  the origin of that event.

    Now as its a endless loading kindda of data grid, i dont think creating new MSGesture()  and attaching it to each row element make any sense to me. There are new elements created on demand in DOM so i thought event delegation is the right choice. and so i said "These children are dynamic and so cant afford to bind gesture event to individual child..."

    Is it possible to do or i will have to attach individual new MSGesture()  object to each row ?

    Thanks

    Tuesday, August 28, 2012 5:43 AM
  • I suppose you could go with some crazy logic, get the coordinate of the event and search the DOM for a child that contains that point.

    Personally, I would create the Gesture object.  Remember you don't need a different listener for each.  You can use the same listener function.  It is not a lot of work, especially if you are adding the elements dynamically, you are there anyhow... just add the 3 lines of code you need to wire it up!

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, August 28, 2012 1:19 PM
    Moderator