Mouseclick problem

[Kuhlig]

Hello

I have the following problem or different behaviors depending on Chrome/Edge or Firefox. Maybe an expert can take a look at it and help me. That would be very nice.

http://ovh01.bpmspace.net:8080/mouseclick_problem.html

Actually I expect the next slide to be displayed when I click the mouse. From slide step 1 (to step 30) there is an additional home button to open an external web page.

In Chome/Edge the behavior is as follows

• Clicking the mouse jumps to the last slide.
• Clicking on the home button also jumps to the last slide.

In Firefox the behavior is as follows

• When clicking with the mouse page 15 not the last one is displayed
• When clicking on the home button it jumps to page 15 and then by a second click the externel page is displayed

Can someone take a look at this? Thanks rob

navigation with keyboard works fine

[janishutz]

Hello

This is expected behaviour because due to the way impress.js works, the steps (if there's no coordinate offset defined) are stacked on top of each other, with the last one being on top as that's the default behaviour in CSS when using position: absoulte or position: fixed. There isn't really an easy solution to this, as changing the order of the slides stacking using z-index in CSS isn't going to fix your problem, rather it would just invert it.

As impress.js directs you straight to the step you clicked on, this can't really be changed in this version. As with a few other issues that were opened over the past years, this will be resolved when I finish my work on the refactor. Since this is a massive job though, that will take until probably 6 months from now as I also have other projects I need to work on.

My plan is to add an attribute to the main impress element that tells impress whether to go to that specific step when clicked on, or just to go to the next slide.

A possible solution for now would be to use the pointer-events in CSS and some class trickery. What this would mean is probably something along the lines of:

.step {
    pointer-events: none;
}

.active .next {
    pointer-events: auto;
    z-index: 100;
}

Essentially what this does is it deactivates the pointer events (which means everything related to mouse) on all the steps and reactivates it for the upcoming step and also moves that particular step to the foreground, so it can be clicked on. This will NOT work with substeps though!

I hope this small rundown helped you out and if you have any other questions, don't hesitate to ask

[henrikingo]

Actually I expect the next slide to be displayed when I click the mouse.

Why do you expect that? I had a look but I don't see use of onmouseclick or similar in your presentation.

[Kuhlig]

@simplePCBuilding thanks I will try - keyboard only is fine for me too - good luck rewriting impress.js

@henrikingo you are right! I took a look at your demo. https://impress.js.org/examples/classic-slides Nothing happens here on mouse click. I thought I somehow broke my project and expected that on mouse click the next slide is called. So I thought it was a bug, but with your explanations it is clear that it is the expected behavior

Thanks for the quick help