Touch events not registering

Opentalk
,
1

Not sure if this is the right place / category but…

I have a Eleventy-generated static web site. I am attempting to use touch events in conjunction with mouse events to close a dropdown if it is open when the user touches an area outside of the dropdown.

  <div class="row header-row-2">
    <div class="row-2-content">
      <button class="dept-btn" id="dept-btn">Departments</button>
      <div class="dept-dropdown" id="dept-dropdown"><ul><li><a href="/departments/breathing-apparatus" class="menu-item">Breathing Apparatus</a></li><li><a href="/departments/communications-gear" class="menu-item">Communications Gear</a></li><li><a href="/departments/computer-equipment">Computer Equipment</a><ul><li><a href="/departments/computer-accessories" class="submenu-item">Computer Accessories</a></li><li><a href="/departments/computers" class="submenu-item">Computers</a></li></ul></li><li><a href="/departments/construction">Construction</a><ul><li><a href="/departments/construction-equipment" class="submenu-item">Construction Equipment</a></li><li><a href="/departments/construction-materials" class="submenu-item">Construction Materials</a></li></ul></li><li><a href="/departments/containers" class="menu-item">Containers</a></li><li><a href="/departments/detectors" class="menu-item">Detectors</a></li><li><a href="/departments/emitters" class="menu-item">Emitters</a></li><li><a href="/departments/explosives" class="menu-item">Explosives</a></li><li><a href="/departments/food-and-drinks" class="menu-item">Food and Drinks</a></li><li><a href="/departments/medical-drugs" class="menu-item">Medical, Drugs</a></li><li><a href="/departments/non-breathing-gases" class="menu-item">Non-Breathing Gases</a></li><li><a href="/departments/power-supplies" class="menu-item">Power Supplies</a></li><li><a href="/departments/protections">Protections</a><ul><li><a href="/departments/armor" class="submenu-item">Armor</a></li><li><a href="/departments/cyberware" class="submenu-item">Cyberware</a></li><li><a href="/departments/dress" class="submenu-item">Dress</a></li><li><a href="/departments/suits" class="submenu-item">Suits</a></li><li><a href="/departments/survival-gear" class="submenu-item">Survival Gear</a></li><li><a href="/departments/units" class="submenu-item">Units</a></li></ul></li><li><a href="/departments/robotics">Robotics</a><ul><li><a href="/departments/automatons" class="submenu-item">Automatons</a></li><li><a href="/departments/drones" class="submenu-item">Drones</a></li><li><a href="/departments/robots" class="submenu-item">Robots</a></li><li><a href="/departments/strangeforms" class="submenu-item">Strangeforms</a></li></ul></li><li><a href="/departments/structures-shelters" class="menu-item">Structures, Shelters</a></li><li><a href="/departments/surface-gear" class="menu-item">Surface Gear</a></li><li><a href="/departments/toolkits" class="menu-item">Toolkits</a></li><li><a href="/departments/transportation">Transportation</a><ul><li><a href="/departments/small-craft" class="submenu-item">Small Craft</a></li><li><a href="/departments/space-craft" class="submenu-item">Space Craft</a></li><li><a href="/departments/vehicles" class="submenu-item">Vehicles</a></li></ul></li><li><a href="/departments/uniques-and-valuata" class="menu-item">Uniques & Valuata</a></li><li><a href="/departments/weapons">Weapons</a><ul><li><a href="/departments/ammunition" class="submenu-item">Ammunition</a></li><li><a href="/departments/blades" class="submenu-item">Blades</a></li><li><a href="/departments/designators" class="submenu-item">Designators</a></li><li><a href="/departments/handguns" class="submenu-item">Handguns</a></li><li><a href="/departments/heavy-weapons" class="submenu-item">Heavy Weapons</a></li><li><a href="/departments/launchers" class="submenu-item">Launchers</a></li><li><a href="/departments/long-guns" class="submenu-item">Long Guns</a></li><li><a href="/departments/machineguns" class="submenu-item">Machineguns</a></li><li><a href="/departments/melee-weapons" class="submenu-item">Melee Weapons</a></li><li><a href="/departments/projectors" class="submenu-item">Projectors</a></li><li><a href="/departments/shotguns" class="submenu-item">Shotguns</a></li><li><a href="/departments/weapon-accessories" class="submenu-item">Weapon Accessories</a></li></ul></li></ul></div>
      <div class="search-form">
        <form>
          <input type="text" name="search" class="search-input" id="search-input">
          <button class="search-btn" id="search-button"><i class="fa fa-search"></i></button>
        </form>
      </div>
    </div>
  </div>

// touch event listener for dropdown box
var clientX, clientY;
window.addEventListener('touchstart', (e) => {
  // capture the x,y coordinates
  clientX = e.touches[0].clientX;
  clientY = e.touches[0].clientY;
  console.log(`x: ${clientX}\ny: ${clientY}`);

})

window.addEventListener('touchend', (e) => {
  const el = document.getElementById('dept-dropdown');
  if (el.style.display === 'block') {
    const {left, top} = getScreenCoordinates(el);
    const right = left + el.offsetWidth;
    const bottom = top + el.offsetHeight;
    
    if (clientX < left || clientX > right || clientY < top || clientY > bottom) {
      el.style.display = 'none';
    }
  }

});

The application works correctly when I serve it from the VS Code server to the device browsers (Safari, Firefox, Chrome) but when I deploy it to Netlify the touch events don’t seem to be getting fired.

Test site: https://trav-csc-test.netlify.app

Github Repo: https://github.com/cmcknight/central-supply-catalog/tree/touch-events

I’m a bit new to using the touch events so it is likely that I’m not understanding something, but I’m lost as to what it might be.

This is a vanilla HTML/CSS/Javascript site (no jsQuery).

Thanks in advance for any insights and ideas!

Chuck

2

Hi @ChuckM

After having tested on Chrome, Firefox, and Safari, I don’t (believe I) see the issue you are describing. In all but a couple of instances touching outside of the Departments dropdown successfully closed the dropdown.

3

Are you testing on the desktop or on a mobile? I’m testing on an iPhone with the mobile versions of Chrome, Firefox, and Safari and it’s only working on Chrome. :frowning:

4

I tested on:

  • Chrome running on Android 11
  • Firefox running on Android 11
  • Safari running on iOS 14.7
5

That’s really weird because I’m getting nothing when I touch outside of the dept dropdown. No clue as to why either. :thinking:

6

If you are using an Android device, you can enable Chrome remote debugging or Firefox remote debugging, and likewise with Safari iOS. This way you can use your phone (as opposed to a desktop browser pretending it is a phone) and see console messages and the like.

If you have done a bit of testing already on your device(s) have you tried an incognito/private tab/window to rule out any local caching of a previous non-working version?

7

I don’t have an Android device, but I have tried using Safari and Firefox remote debugging and I’m not seeing any of the console.log messages, even in incognito sessions. I’m really not sure what’s going on. I”ve cleared the cache on the device, as far as I know I have the latest version of iOS and Safari. :-/

8

Also, I want to be clear that I’m not laying blame on anything, I’m just genuinely stumped on why I’m seeing what I’ve described. :frowning:

9

I’m wondering if I should move the event to the body instead of the window. :thinking:

10

You can simply use the click event, all mobile browsers accept it. You don’t have to check for coordinates either, just make sure the event target isn’t the dropdown or a child (untested):

const dropdown = document.getElementById('dept-dropdown');

document.addEventListener('click', (e) => {
  if (dropdown !== e.target || !dropdown.contains(e.target)) {
    
    if(dropdown.style.display === 'block') {
      dropdown.style.display = 'none';
    }
  }
})
1 Like
11

Hi Tom,

Just tried that but it has the effect of immediately closing the dropdown when I click the department button. In the click event of the department button I’m using PreventDefault so that the the click event doesn’t bubble up (or at least I thought it stopped it). I can see the button click event is being fired, but the dropdown never appears. Curiouser and curiouser…

Best regards,

Chuck

12

So I dropped all of the touch event-related stuff and now things magically work as expected. I’m now really confused.

13

Do you mean you changed the touch events to the click event?

14

No, I simply removed them. I already had a click event in place but when I deployed the site to Netlify for testing it failed on the mobile devices. That’s why I was going down the touch event dark alley.

15

That might have been a caching issue then… Glad it’s working!