How to Handle Mouse Clicks
This section describes how mouse events such as mouse clicks are handled using the Javascript API. Mouse clicks are useful for adding all sorts of useful effects, including adding hyperlinks to 3D objects. Adding Javascript code to handle mouse clicks is easy. We just need to define a function to handle the events and then let the applet know to listen for these events and to call our function when they occur.
- Add Javascript "include" files
The first step is to include the neccessary Javascript resource files that contain the definitions of mouse events and the methods used to handle them (in this case, just one file).
You must also include the set of Javascript files mentioned previously to add markers. So see the full set of files, just click on the example image at the bottom of this page and
click on the "view source" menu option in your web browser.
<script src="scripts/interface/hc_events.js"></script>
- Create a mouse event handler function
The next step is to create a function to handle mouse events.
When you create this function, it should accept two parameters, an overlay and a point. The first parameter, the overlay, tells whether the mouse event has occcured on a particular overlay, for example, if you've clicked on a marker (markers are considered overlays). The second parameter, the point, contains the XYZ location of where the user has clicked in the scene.
applet.onload = function() {
// create new mouse event handler function
//
var handler = function(overlay, point) {
if (overlay) {
// an overlay has been clicked - do something!
//
}
}
}
- Assign mouse handler to mouse event "listeners"
Now that you have a function to handle mouse events, the last step is to add it to the set of "listeners" that listen for mouse events to occur. This is done using the HCEvent's "addListener" method. The first parameter to this method is the applet. The second parameter is the type of event to listen for, in most cases a "click". The last parameter is a reference to a function to call when this mouse event occurs. Whenever a mouse event occurs, this function will automatically be called.
applet.onload = function() {
// create new mouse event handler function
//
var handler = function(overlay, point) {
if (overlay) {
// an overlay has been clicked - do something!
//
}
}
// add listener for mouse events
//
HCEvent.addListener(applet, "click", handler);
}
|
