element not registering the click event at a specific position

[francogrex]

This is probably a bug in versa 3:

<svg...>

<rect x="10%" y="0%" width="20%" height="20%" id="buttonSTART" fill="green" pointer-events="visible" />
<rect x="10%" y="80%" width="20%" height="20%" id="buttonSTOP" fill="red" pointer-events="visible" />
<rect x="70%" y="80%" width="20%" height="20%" id="buttonREAD" fill="blue" pointer-events="visible" />

...

The buttonREAD is exactly similar in every aspect to buttonSTOP and buttonSTART except for its position. In the buttonREAD.addEventListener("click",... nothing happens, while the buttonSTOP and buttonSTART react correctly to the clicks; but if the position of buttonREAD is changed to the left side for example rect x="10%" y="50%" width="20%" height="20%" id="buttonREAD" fill="blue" pointer-events="visible" />, it's working just fine. Anywhere on the right, the element is not clickable! Is this a know bug for the Fitbit watch?

[francogrex]

This is probably a bug in versa 3:

<svg...>

<rect x="10%" y="0%" width="20%" height="20%" id="buttonSTART" fill="green" pointer-events="visible" />
<rect x="10%" y="80%" width="20%" height="20%" id="buttonSTOP" fill="red" pointer-events="visible" />
<rect x="70%" y="80%" width="20%" height="20%" id="buttonREAD" fill="blue" pointer-events="visible" />

...

The buttonREAD is exactly similar in every aspect to buttonSTOP and buttonSTART except for its position. In the buttonREAD.addEventListener("click",... nothing happens, while the buttonSTOP and buttonSTART react correctly to the clicks; but if the position of buttonREAD is changed to the left side for example rect x="10%" y="50%" width="20%" height="20%" id="buttonREAD" fill="blue" pointer-events="visible" />, it's working just fine. Anywhere on the right, the element is not clickable! Is this a known bug for the Fitbit watch?

[Guy_]

Hi @francogrex - it would seem there are other elements in your SVG, try moving buttonREAD element to the bottom of your SVG statements. The statements layer with the last being on the top and accessible.

I have moved this post to the SDK development forum so others may also provide a helpful answer [and merged in your other duplicate post].

[francogrex]

ok thanks, it's possible. I have tried creating a new test app with a rect element covering 100% of the device width and length and using a rect.addEventListener("mousemove", (evt) => {
console.log(`Mouse moved - x: ${evt.screenX}, y: ${evt.screenY}`);
})

I confirm that the screen is reacting as it should across the whole device display, so it must be what you said above then, overlapping elements in my previous index.view svg, though I can't imagine what they could be...

[Guy_ · Accepted solution]

@francogrex- any text field encroaching on that space can make it picky to respond.

In the Simulator use the mouse to click different parts of the buttonREAD field, you may find some parts respond, as the cursor is more precise than a finger on a real watch.