Best Way to Ensure Touch Sensitivity of Multiple Objects on the Screen

[harpo666]

Hi guys,

I am trying to put a grid of 9 buttons on an App using the format below using pointer-events. On top of the button I layer a text field which I alter when the user taps the button.

I am finding that I have to tap the button 2 or 3 times to register the tap correctly. Is there any way to increase the tap sensitivity or any guidelines to help make sure the user only has to tap once?

Below is the basis of my approach using pointer-events.

index.gui

<rect id="box1" x="10%"   y="19%" width="60" height="60" fill="blue" pointer-events="visible"/>
<text id="text1" x="20%" y="33%" text-anchor="middle" class="text" pointer-events="visible" >1</text>

index.js

box1.onclick = function() {
  console.log(`I just clicked on the box number 1`);
  myFunction.clickTile();
}

text1.onclick = function() {
  console.log(`I just clicked on the text number 1`;
  myFunction.clickTile();
}

[harpo666]

I tried a regular button, using the below. I also increased to size of the button as much as possible and this seems to work much better.

let mybutton1 = document.getElementById("mybutton1");
mybutton1.onactivate = function(evt) {
  console.log("Clicked myButton1");
}