Skip to main content
Participant
August 30, 2016
Answered

Registering Click Event

  • August 30, 2016
  • 3 replies
  • 739 views

I tried using the following JavaScript on slide enter. The click event registers OUTSIDE the slide but not inside. Basically I just want to capture the coordinates whenever a user clicks on the slide.

function getClickPosition(e) {

var xPosition = e.clientX;

var yPosition = e.clientY;

console.log(xPosition,",",yPosition);

window.cpAPIInterface.setVariableValue("X_COORDINATE",xPosition);

window.cpAPIInterface.setVariableValue("Y_COORDINATE",yPosition);

}

window.addEventListener("click", getClickPosition, false);

This topic has been closed for replies.
Correct answer TLCMediaDesign

'use strict';
/* global cp */
var interfaceObj, eventEmitterObj, mySlide = null;

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

function initializeEventListeners()
{
eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
{
  mySlide = document.getElementById("div_Slide");
  mySlide.addEventListener("click", getClickPosition, false);
});
}

function getClickPosition(e)
{
var pw = ( window.innerWidth - parseInt($(mySlide).css("width"))) / 2;
window.cpAPIInterface.setVariableValue("X_COORDINATE", e.clientX - pw);
window.cpAPIInterface.setVariableValue("Y_COORDINATE", e.clientY);
}

3 replies

TLCMediaDesign
TLCMediaDesignCorrect answer
Inspiring
May 24, 2018

'use strict';
/* global cp */
var interfaceObj, eventEmitterObj, mySlide = null;

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

function initializeEventListeners()
{
eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
{
  mySlide = document.getElementById("div_Slide");
  mySlide.addEventListener("click", getClickPosition, false);
});
}

function getClickPosition(e)
{
var pw = ( window.innerWidth - parseInt($(mySlide).css("width"))) / 2;
window.cpAPIInterface.setVariableValue("X_COORDINATE", e.clientX - pw);
window.cpAPIInterface.setVariableValue("Y_COORDINATE", e.clientY);
}

Inspiring
May 24, 2018

Fantastic!

Thanks for your quick and accurate reaction.

TLCMediaDesign
Inspiring
May 14, 2018

This code will tell you where on the slide the user clicks. The left of the slide is 0;

var mySlide = null;

    

     function getClickPosition(e)

     {       

      var pw = ( window.innerWidth - parseInt($(mySlide).css("width"))) / 2;

      window.cpAPIInterface.setVariableValue("X_COORDINATE", e.clientX - pw); 

      window.cpAPIInterface.setVariableValue("Y_COORDINATE", e.clientY); 

     }

      mySlide = document.getElementById("div_Slide");

     mySlide.addEventListener("click", getClickPosition, false);

Inspiring
May 24, 2018

Thanks for sharing!

Works fine if I use this code in an Advanced Action, On Enter, Execute Javascript!

How can I get this to work if I want to put the code in an external JS file (will link to the JS file from index.html offcourse).

Participant
May 12, 2018

I have a very similar problem. Have you already found a solution how to use .clientX successfully in Captivate?