Tutorial: Mouse Area

1. Create a JS object in Window #10.

2. Copy the following code and paste it in the Source code page of the JS Object:

   // Create a function to be triggered
   function helloWorld() {
       console.log("Hello world!");
   }
   
   // Create a mouse detection area
   var ma = new MouseArea();
   
   // To make mouseArea working, add it to current widget
   this.widget.add(ma);
   
   // When mousedown is detected, call helloWorld
   ma.on("mousedown", helloWorld);
   

3. Simulate this project

4. Right click to open cMT Diagnoser And click “JS” tab (JavaScript console)

5. Click JS object in cMT Viewer

You should see “Hello world!” in cMT Diagnoser

Example:

[09:00:00] Hello world!

Currently the MouseArea provides only 4 mouse events:

• mousedown
• mouseup
• click
• mousemove

You may change mousedown from previous exercise to any one above.

// Create a function to be triggered
function helloWorld() {
    console.log("Hello world!")
}

// Create a mouse detection area
var ma = new MouseArea();

// To make mouseArea working, add it to current widget
this.widget.add(ma);

// When mousedown is detected, call helloWorld
ma.on('mousemove', helloWorld);