touchstart blocking button listener

I'm using Seadragon Ajax with jQuery touch event listeners.


The container has touchstart, touchmove and touchend bound to it, heres the touch start:

.bind('touchstart MSPointerDown', function(e){
 
             var p = coord(e.originalEvent);
             p.start = true;
             p.scale = 1;
             if(e.originalEvent.pointerType === 4) return;
             else if(e.originalEvent.pointerType !== undefined) e.originalEvent.preventMouseEvent();
 
             $(this).data(p);            
 
             e.preventDefault();
             e.stopPropagation();
         })
 

Inside the seadragon view are some buttons generated. These buttons are not firing on a tablet because of the touchstart on its container div. It works fine with a mouse.

new Seadragon.Button("Click to go", "", "", "", "", null, moveFunction, null, null, null );
 

I need to check to see if the touch is on a button or not before all the stuff in the touchstart function but really am not sure how.

---

Answer:

Resolved by adding an if statement to check the number of touches as below:

.bind('touchstart MSPointerDown', function(e){
            if (event.touches.length != 1) {
                e.preventDefault();
                e.stopPropagation();
            }

            var p = coord(e.originalEvent);
            p.start = true;
            p.scale = 1;
            if(e.originalEvent.pointerType === 4) return;
            else if(e.originalEvent.pointerType !== undefined) e.originalEvent.preventMouseEvent();

            $(this).data(p);        


        })