Handling the step click event

Apart from the keys discussed in the previous section, impress.js provides a click event on each step. We can directly move to any step by clicking on the step.

Tip

Ideally we should see more than one slide to use the click event. Generally, we will have steps covering the complete width and height of the screen, so we can only use click event in an overview step for most cases.

Let's see how the click event is handled inside the core impress code:

document.addEventListener("click", function ( event ) {
    var target = event.target;
    // find closest step element that is not active
    while ( !(target.classList.contains("step") && !target.classList.contains("active")) &&
        (target !== document.documentElement) ) {
        target = target.parentNode;
    }

    if ( api.goto(target) ) {
        event.preventDefault();
    }
}, false);

This code first gets the target element on the click event. Then, it checks if it contains the step class...