Skip to main content

Posts

Showing posts from May, 2020

When to actually use preventDefault(), stopPropagation(), and setTimeout() in Javascript event listeners

Unfortunately, a search for "when to use stopPropagation()" and "when to call stopPropagation()" on Google turns up few answers except a number of very and semi-flawed articles related to the topic, none of which answer the question of when it is okay to use stopPropagation(). stopPropagation() exists and therefore is meant to be used...but when? It's time to remedy both the misinformation and provide the correct answer on when to call preventDefault() and stopPropagation() as well as setTimeout(). I promise setTimeout() is semi-related. Event handling in web browsers is quite difficult for most people to grasp...even apparently for the experts! There are 85+ events to consider when writing custom Javascript bits. Fortunately, there are only a few in that list that are commonly used: keydown, keyup, keypress mouseenter, mousedown, mousemove, mouseup, mouseleave, wheel touchstart, touchmove, touchend click, input, change scroll, focus, blur load, s