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
Developer
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800
My Carrier: DiGi

Handling Clicking and Touch Event on Touch Screen Device

Hi all. I have a bit problem of trying to get onclick and touch event to work. I have this function that will display a list of records retrieve from webservices and user will have to click on the list(consist of divs) to view them in detail.

 

 for(var i = 0; i < len; i++)
          {
            var pendRefNo = data.result[i].refno;
            var pendRequester = data.result[i].requestor;
            var pendDate= data.result[i].date;
            var pendAmount = data.result[i].amt;
  
            strPendList += '<div class="pendClaimDisplay" x-blackberry-focusable="true" onmouseover="refHighlight(this)" onmouseout="noRefHighlight(this)" onclick="qClaimParticulars(\''+pendRefNo+'\')">';
            strPendList += '<div class="pendRefLabel">REF NO </div>';
            strPendList += '<div class="pendRefValue">: '+pendRefNo+'</div>';
            strPendList += '<div class="pendRequesterLabel">REQUESTER : </div>';
            strPendList += '<div class="pendRequesterValue">'+pendRequester+'</div>';
            strPendList += '<div class="pendDateLabel">DATE </div>';
            strPendList += '<div class="pendDateValue">: '+pendDate+'</div>';
            strPendList += '<div class="pendAmountLabel">AMOUNT : </div>';
            strPendList += '<div class="pendAmountValue">'+pendAmount+'</div>';
            strPendList += '</div>';//end of pendClaimDisplay
          }
          strPendList += '</div>';//end of pendingContainer
          $('#content').html(strPendList);

 It works nicely on non-touch screen as user will only have to use the trackpad/trackball to scroll down the list, click on the highlighted div to view details.

 

But on touch screen, sometimes if user scroll by moving the list the up and down, it will fire the onclick event. I'm banging my head on the keyboard to think of a workaround but couldn't think of one.

 

Any advice will be greatly appreciated.

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: Handling Clicking and Touch Event on Touch Screen Device

Touch never has an mouse(over/enter/exit) event

 

The code you show won't work on a touch device so you need to trigger it some other way

 

I would suggest that you use a modal 'lightbox' sort of deal whereby if the user wants to inspect one record they touch that line to see the details

 

You could, potentially, use touchmove before touchend to do what it looks like I think you're trying to do but it's somewhat messy to code - it would, however, give the same result as you have on desktop




Click the like button if you find my posts useful!
Developer
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800
My Carrier: DiGi

Re: Handling Clicking and Touch Event on Touch Screen Device

Hi peardox. Sorry for not explaining properly. What I meant was when a touch screen user scrolls the list of records, sometimes the finger movement might trigger the onclick event instead of scrolling down the list.

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: Handling Clicking and Touch Event on Touch Screen Device

Righto - I see the problem now

 

Let's say that you touch and scroll - it's quite likely that your finger is still over the same element when you take your finger off

 

This will register as a click as the mouse handler doesn't have much idea of the scrolling concept

 

A small smattering of code....

 

-------------------------------------------------------

 

function mousepoint(event)
    {
    return { 'x': event.pageX, 'y': event.pageY,};
    }

 

$('#somediv').mousedown(function (e) {
        var tp = mousepoint(e);
        return false;
        });

-------------------------------------------------------

 

Another smattering of code....

 

function touchpoint(event, starting)
    {
    var first = event.changedTouches[0];
    
    return { 'x': first.clientX, 'y': first.clientY };
    }

document.addEventListener('touchstart', function(e) {
    e.preventDefault();

    var tp = mousepoint(e);

    return false;
    }, false);

-------------------------------------------------------

 

In both cases tp knows where the touch / mouse is

 

Add in move and end events then you know exactly what the user just did - and more importantly if they're doing a touch scroll - tp.y will be a large number compared to the last reading if scrolling

 

I use this method on a little game I've nearly finished and it's very intuative - works as expected on both desktop and BB touch as I check the x/y of everything before performing an action

 

You need to give everything an id and a class for diffo types of things

 

Mouse has to be bound after you inject the HTML

 

-------------------------------------------------

 

Live code (won't work for you - directly from my game source) but shows the way to do it...

 

var dragging = false;

 

function bindblocks() {
    $('#playboard').mousedown(function (e) {
        var tp = mousepoint(e, true);
        if(tp.btype < 9)
            {
            if(debug) $('#dbgtext').html('drag started - ' + tp.x + ' x ' + tp.y + ' = '  + tp.bx + ' x ' + tp.by + ' x ' + tp.btype);
            dstart = tp;
            dragging = true;
            }
        return false;
        });

    $('#playboard').mousemove(function (e) {
        var tp = mousepoint(e, true);
        if(dragging)
            {
//            $('#dbgtext').html($('#dbgtext').html() + '<br />\ndragto - ' + tp.x + ' x ' + tp.y + ' = '  + tp.bx + ' x ' + tp.by + ' x ' + tp.btype);
            }
        return false;
        });

    $('#playboard').mouseup(function (e) {
        if(dragging)
            {
            var tp = mousepoint(e, true);
            if(debug) $('#dbgtext').html($('#dbgtext').html() + '<br />\ndrag ended - ' + tp.x + ' x ' + tp.y + ' = '  + tp.bx + ' x ' + tp.by + ' x ' + tp.btype);
            dragging = false;
            moveblock(tp);
            return false;
            }
        dstart = { 'bx': -1, 'by': -1, 'btype': 10 };
        });

    }

--------------------------------------------------

 

This binds any mouse events to my handlers - after I build playboard I call bindblocks() so everything knows what to do

 

It's easily to adapt the above to do whatever you like




Click the like button if you find my posts useful!
Developer
Posts: 79
Registered: ‎09-17-2012
My Device: Torch 9800
My Carrier: DiGi

Re: Handling Clicking and Touch Event on Touch Screen Device

Thank you for the solution and explanation peardox.