How to remove keydown event in searchbar of drum website

I have made drums and assigned a theme to play on the keydown event. I want to add a search bar leading to different pages. But on inputting text inside the search bar audio of the drums is still playing. How do I remove it from that section? Or rather not allow audio to be played in that input element?

Solution 1:

If you added the keydown event-listener on an upper(ancestor) element, the keydown event of the input(seachbar) propagates to upper level.

In this case, you might want to use stopPropagation() to stop the event from going to upper level.

searchbar.addEventListener('keydown', (e) => {
  e.stopPropagation()
  ...
})