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 Contributor
burdeasa
Posts: 2
Registered: ‎02-22-2013
My Device: Developer using BlackBerry 10 Simulator
My Carrier: None

Not all click event handlers are fired in certain cases using BlackBerry 10 browser in simulator

I have a web app designed for webkit browsers.  This web app has worked fine on various levels of iOS and Android, and BlackBerry 6.

 

I started testing the application with the BlackBerry 10 simulator and encountered problems.  After debugging, it appears that click events are not being delivered reliably in certain cases.

 

I developed a simple (if somewhat contrived) web page to demonstrate the problem.  I am using BlackBerry 10 Dev Alpha C Simulator Beta (10.1).

 

Here is the web page:

<!DOCTYPE html>
<html>
<head>
    <title>Click Event Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=0, user-scalable=no" />

    <style>
        #div2
        {
            display: inline-block;
            vertical-align: middle;
            border: 1px solid black;
            height: 19px;
            width: 19px;
        }

        #div3
        {
            position: relative;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
            </div>
        </div>
    </div>

   <script type="text/javascript">
       var div1ClickHandler = function (e) {
           console.log("In div1ClickHandler: target.id=" + e.target.id
				+ " currentTarget.id=" + e.currentTarget.id);
       };
       var div2ClickHandler = function (e) {
           console.log("In div2ClickHandler: target.id=" + e.target.id
				+ " currentTarget.id=" + e.currentTarget.id);
       };

       var div1 = document.getElementById("div1");
       var div2 = document.getElementById("div2");

       div1.addEventListener("click", div1ClickHandler, true);
       div2.addEventListener("click", div2ClickHandler, false);
   </script>
</body>
</html>

 

As you can see, I have three nested divs.  I have a click event handler for div1 and div2.  I click inside the black box given by the border around div2.  However, only the event handler for div1 fires.  That is the console shows this message:

In div1ClickHandler: target.id=div1 currentTarget.id=div1

Note that the target and currentTarget are both div1.

 

The event handler for div1 is a capture mode handler (third parameter true), because this was the issue in the original web app I was testing.  However, additional testing revealed that changing this parameter to false (that is, the usual bubbling handler) did not change the results.

 

If I comment out the div1.addEventListener line, then the event handler for div2 does fire.  That is, the console shows this message:

In div2ClickHandler: target.id=div2 currentTarget.id=div2

Note that the target and currentTarget are both div2.

 

Further testing reveals that both handlers will be called as I expect if I change any one of the following:

    • Remove "vertical-align: middle"
    • Remove "position: relative"
    • Change "height: 19px" to at least 20px.
Please use plain text.
Developer
peardox
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: Not all click event handlers are fired in certain cases using BlackBerry 10 browser in simulator

Without trying the code can I point out that events filter?

 

In the event handler use a e.preventDefault() soon as you can

 

Div2 will filter to Div1

 

Lets say you have 100 nested Divs with no escape clause

 

Every one will get the message unless you stop propogation - send an event to div100 and eventually div1 gets it

 

This is actually sensible as div1 may want to do something that div100 did




Click the like button if you find my posts useful!
Please use plain text.
New Contributor
burdeasa
Posts: 2
Registered: ‎02-22-2013
My Device: Developer using BlackBerry 10 Simulator
My Carrier: None

Re: Not all click event handlers are fired in certain cases using BlackBerry 10 browser in simulator

Thanks for the comment.

 

The original web app that I was testing was indeed attempting to filter some click events to prevent them from reaching their final destination in certain cases.  The trouble was that even when filtering did not occur, the event was not reaching its intended destination.

 

This simple test page does not do any filtering to keep things as simple as possible.

 

Please use plain text.
Developer
peardox
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: Not all click event handlers are fired in certain cases using BlackBerry 10 browser in simulator

I'll stick it on my list of things to do in the next day

 

If nobody gets back to you before then I will (hopefully) have a solution

 

Click the like button :smileyhappy:




Click the like button if you find my posts useful!
Please use plain text.