Custom module prohibits form submission

[mvannieuwenhuij]

Hi all,

I created a custom module off of this game; F1 Start Timer. There are two issues that I'm unable to resolve due to my limited technical knowledge.

1) Once I add the module to my website page, anywhere I click in the editor it triggers the game and I'm unable to make any in-line changes to any of the other modules. When I wanted to make changes up until now I removed te module and re-added it when I was done. I just found out that I am able to make changes in the window on the left hand side if I click a module, it's just the in-line editor that's not working anymore.

Now, that's not the worst, I could live with that. But I found out the module is causing another issue;

2) When the module is on the page and I look at the page's preview, I'm unable to fill out any of the fields in the form that is located underneath. It doesn't even let me click into them, it just triggers the game. See preview here. When I remove the module, I'm able to fill it out so clearly the module is causing some issues here. Is there any way to limit the space in which the custom module is triggered to allow a normal form submission underneath?

Any ideas how to resolve this would be highly appreciated. Please let me know if you'd like more information or specific snippets of the html/css/javascript.

For any fellow HubSpotters, feel free to access my account and have a look at the setup:

• Module link
• Website page link

[mvannieuwenhuij]

Thanks for your replies, @Kevin-C  and @mangelet . Really appreciate you looking into this!

I replaced

addEventListener('touchstart', tap, {passive: false});

With

document.querySelector('.f1-lights').addEventListener('touchstart', tap, {passive: false});

But I don't notice any difference on the preview page. Still cannot click into the form fields, it just continues to trigger the game. Unfortunately I don't have the required Javescript knowledge to understand what is happening and resolve the issue accordingly. Just trying to put this together for my mom who is starting her own busines after being layed off a few months ago.

Please see the module's full JS as it is at the moment pasted below;

const lights = Array.prototype.slice.call(document.querySelectorAll('.light-strip'));
const time = document.querySelector('.time');
const best = document.querySelector('.best span');
let bestTime = Number(localStorage.getItem('best')) || Infinity;
let started = false;
let lightsOutTime = 0;
let raf;
let timeout;


function formatTime(time) {
  time = Math.round(time);
  let outputTime = time / 1000;
  if (time < 10000) {
    outputTime = '0' + outputTime;
  }
  while (outputTime.length < 6) {
    outputTime += '0';
  }
  return outputTime;
}

if (bestTime != Infinity) {
  best.textContent = formatTime(bestTime);
}

function start() {
  for (const light of lights) {
    light.classList.remove('on');
  }
  
  time.textContent = '00.000';
  time.classList.remove('anim');
  
  lightsOutTime = 0;
  let lightsOn = 0;
  const lightsStart = performance.now();
  
  function frame(now) {
    const toLight = Math.floor((now - lightsStart) / 1000) + 1;
    
    if (toLight > lightsOn) {
      for (const light of lights.slice(0, toLight)) {
        light.classList.add('on');
      }
    }
    
    if (toLight < 5) {
      raf = requestAnimationFrame(frame);
    }
    else {
      const delay = Math.random() * 4000 + 1000;
      timeout = setTimeout(() => {
        for (const light of lights) {
          light.classList.remove('on');
        }
        lightsOutTime = performance.now();
      }, delay);
    }
  }
  
  raf = requestAnimationFrame(frame);
}

function end(timeStamp) {
  cancelAnimationFrame(raf);
  clearTimeout(timeout);
  
  if (!lightsOutTime) {
    time.textContent = "Valse start!";
    time.classList.add('anim');
    return;
  }
  else {
    const thisTime = timeStamp - lightsOutTime;
    time.textContent = formatTime(thisTime);
    
    if (thisTime < bestTime) {
      bestTime = thisTime;
      best.textContent = time.textContent;
      localStorage.setItem('best', thisTime);
    }
    
    time.classList.add('anim');
  }
}

function tap(event) {
  let timeStamp = performance.now();
  
  if (!started && event.target && event.target.closest && event.target.closest('a')) return;
  event.preventDefault();
  
  if (started) {
    end(timeStamp);
    started = false;
  }
  else {
    start();
    started = true;
  }
}

document.querySelector('.f1-lights').addEventListener('touchstart', tap, {passive: false});

addEventListener('mousedown', event => {
  if (event.button === 0) tap(event);
}, {passive: false});

addEventListener('keydown', event => {
  if (event.key == ' ') tap(event);
}, {passive: false});

if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/sw.js');
}

Any ideas what could still be causing this and how to resolve it?

[Kevin-C]

Hey @mvannieuwenhuij 

Looks like you've still got a mousedown event listener without a target just below the "document.querySelector('.f1-lights').addEventListener('touchstart', tap, {passive: false});".

I'm not 100% sure thats the issue but very well could be.

[mangelet]

@mvannieuwenhuij agree here with @Kevin-C but i would not use jquery... just replace this line in your code and you are set.

document.querySelector('.f1-lights').addEventListener('touchstart', tap, {passive: false});

[Kevin-C]

Hey @mvannieuwenhuij 

In the games JS it looks like you're inadvertently targeting the top level elmentof the page (the html tag) by using the addEventListener method without defining a target. Excerpt from your JS below:

addEventListener('touchstart', tap, {passive: false});

So this is catching all clicks/taps on the page thus causing both of your issues.

You might be able to fix the issue by defining the top level element of your module as the target:

$('.f1-lights').parent().addEventListener…

Thus only capturing the clicks that occur on that module

Edit: added context