Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Developer
Posts: 63
Registered: ‎10-27-2010
My Device: 9900 and PlayBook
My Carrier: Rogers

event.preventDefault not working properly? webworks tablet sdk

Anyone else having issues getting event.preventDefault working properly on the tablet simulator?

 

I've placed event.preventDefault() on all touch and mouse events, (onmouseup, onmousedown, onmousemove, ontouchstart, ontouchend and on touchmove).  For example:

 

 

document.ontouchmove = function(event) {
    event.preventDefault();

 

    .....

}

 

But I can still easily make the document scroll.

 

(I'm working with the latest SDK and simulator)

-----------------------------------------------------------------------------
Apps:Beats Brainwave Entrainment - Awesome Timer - StarSlide - Save Santa
@jamiebeach
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: event.preventDefault not working properly? webworks tablet sdk

Perhaps this is a silly question but why would you override the mouse events as well as touch?

 

Anyway - the following definitely works

 

function touchHandler(event)
    {
    event.preventDefault();

    [rest of the code to handle touch events]

    }

 

document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);

 

This locks your app so you can't drag it around unless you tell it to in the handler code via something alonf the lines of

 

    var simulatedEvent = document.createEvent("MouseEvent");

    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                              first.screenX, first.screenY,
                              first.clientX, first.clientY, false,
                              false, false, false, 0, null);

 

    event[0].target.dispatchEvent(simulatedEvent);

An example of this kind of selective processing of events can be found in the sketchpad example




Click the like button if you find my posts useful!
New Developer
Posts: 63
Registered: ‎10-27-2010
My Device: 9900 and PlayBook
My Carrier: Rogers

Re: event.preventDefault not working properly? webworks tablet sdk

@peardox - thanks for the response. Much appreciated. I'll try modifying my events tonight aand add the touchcancel.
The mouse* event handlers are there as I'm doing most of my testing in chrome. I tried removing them but no change.
-----------------------------------------------------------------------------
Apps:Beats Brainwave Entrainment - Awesome Timer - StarSlide - Save Santa
@jamiebeach
Developer
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C
My Carrier: 3, Orange, Vodafone

Re: event.preventDefault not working properly? webworks tablet sdk

PM me and I'll show you how to do it

 

I will need a email so I can give you the source




Click the like button if you find my posts useful!
New Contributor
Posts: 5
Registered: ‎04-23-2011
My Device: no
My Carrier: no

Re: event.preventDefault not working properly? webworks tablet sdk

Can you please confirm that you guys got that figured out?  

 

in terms of the scrolling stage, my app was working fine on the tablet SDK a few weeks ago WITHOUT the assistance of event.preventDefault.  i was able to properly drag an element of my app around the screen.   the main fix was to make the body was smaller than the screen size, and everything stayed in place while i dragged the target element.   now i updated the SDK, and all of the sudden the stage would stay still.  i can't drag anything without taking the whole app stage with it.   I tried the event.preventDefault and the stopPropagation.    i suspect that this change is due to new "design feature" in the tablet SDK.  hopefull it is not so on the actual tablet, as it is quite unwanted in this case.

 

I tried the recommendations of peardox, as I understood it, but that did not work

 

I've also tried the simplest HTML with a single box of 200x200 pixels.  and body size of 500x400 (confirmed with borders).  even still, normal use of preventDefault or stopPropagation would not keep the stage from scrolling vertically.

 

thanks

New Developer
Posts: 63
Registered: ‎10-27-2010
My Device: 9900 and PlayBook
My Carrier: Rogers

Re: event.preventDefault not working properly? webworks tablet sdk

I meant to post a follow up, sorry.

I use a canvas that is full screen (1024x600).
For some reason, in my css, I set a 1px border to the canvas, which would make the canvas element 1026x602 and expand the page size outside of the screen size.

I removed the border and the scrolling stopped. If I add a border to only the top and bottom of the canvas (making my doc larger than the screen vertically only), it will scroll vertically. If I add the border to the left and right only, the sage would scroll horizontally.

So it seems that preventDefault doesn't work if the body of the html doc is larger than the screen.

In your case though, that doesn't seem to be the problem.
Have you tried the code in the sample sketch app?
-----------------------------------------------------------------------------
Apps:Beats Brainwave Entrainment - Awesome Timer - StarSlide - Save Santa
@jamiebeach