# Playing With Event Listeners

**URL:** <https://talk.atomisystems.com/t/playing-with-event-listeners/8356>\
**Category:** ActivePresenter\
**Created:** [March 5, 2024, 8:45pm UTC](https://talk.atomisystems.com/t/playing-with-event-listeners/8356 "2024-03-05T20:45:45Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![gregs](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/gregs/32/6695_2.png) [@gregs](https://talk.atomisystems.com/u/gregs)\
**Post date:** [March 5, 2024, 8:45pm UTC](https://talk.atomisystems.com/t/playing-with-event-listeners/8356/1 "2024-03-05T20:45:45Z")

</div>

I recently was asked to help solve a JavaScript problem for someone.  
They were working on a project where they needed a button that would take them to the next slide.  
Now this may seem like a very easy task that does not require any JavaScript but there was a catch. This particular button was to be held for a minimum amount of time in order for the desired action to fire. If the learner released the button too early, nothing should happen.

I decided that I should try this with ActivePresenter to see if I could achieve the same result with JavaScript.  
My solution involves only two slides. The first slide has a square with a semi-transparent shape over the top to serve as the object to be held for three seconds to trigger the navigation to the next slide. This slide also has a little code in the onLoad portion.  
The second slide simply has a circle to show that we have moved to another slide.

This was a little tricky as I had to change the code quite a bit to fit the ActivePresenter API but it does indeed work. I am sure there are other, easier ways to achieve this but this was the way I came across first.

Here is the code I used with some commenting to help explain, along with the sample project to play with.

```auto
// Declare the variable that will hold the
// timeout function for our object
var goNext;

// Declare the variable that will hold the
// object that will be held for three seconds
var myObj = $(prez.object("Shape_4").node);

// Assign the event listener to the object
myObj.mousedown(function() {
  goNext = setTimeout(execNext, 3000);
  
// If the object is not held for three seconds
// cancel the timeout function
  myObj.mouseup(function() {
    clearTimeout(goNext);
  });
});

// Define the function that triggers when
// the object is held a full three seconds
window.execNext = function() {
  prez.nextSlide();
};

```

Hopefully this helps someone figure something out someday!  
You must press and hold the box on slide one for three seconds in order to navigate to slide two.

[listener.approj](https://talk.atomisystems.com/uploads/short-url/fZFZkSRHBwrx0nuS8bm0FfpI9IL.approj) (280 KB)