Here is a breakdown of the code:
// Checking if variables ext, spot, and box are defined and not falsy values
if (ext && spot && box) {
/* Attaching onmousemove event handler to the function onMouseMove in JavaScript */
document.getElementById('text-shadow-box').onmousemove = onMouseMove;
/* Another example where ontouchmove anonymous function gets attached */
document.getElementById('text-shadow-box').ontouchmove = function (e) {
// The 'e' here is the event object passed as an argument to the handler function
e.preventDefault(); e.stopPropagation();
// Calling function onMouseMove with certain properties from the touches
onMouseMove({
clientX: e.touches[0].clientX,
clientY: e.touches[0].clientY
});
};
For more information on touchscreen events like ontouchmove, visit here.
According to the specification, the
touches object handles touches on the screen, providing different ways to access touched elements.
Explaining event.stopPropagation()
Description: Stops the event from bubbling up the DOM tree, preventing any parent handlers from receiving it.
Detailing event.preventDefault()
Description: Calling this method prevents the default action associated with the event.
Therefore, using event.stopPropagation() ensures that parent elements do not receive the event, while event.preventDefault() stops the default action, such as following a link when clicking.