# Click Listener
If you want to get information about what the user has clicked on, you can set up a callback function. The callback function looks like this:
function clickListener(abcelem, tuneNumber, classes, analysis, drag, mouseEvent) {
}
renderAbc("paper", abcString, { clickListener: clickListener })
2
3
4
Here is the data that is returned to you:
# abcelem
The internal object that is associated with the element clicked. Use a debugger to see what is available.
Tip
This object is subject to change as the library gets more functionality. There is not a guarantee that it will stay backwards compatible. But that said, the structure of this object doesn't change much and usually just adds properties.
# tuneNumber
If there are more than one tune in the original abcString, this reports which tune was clicked on.
# classes
The css classes of the element that was clicked. (This requires the parameter { add_classes: true }
).
# analysis
An object containing the following info about the item clicked:
{
line: 0, // zero-based line
measure: 0, // zero-based measure from the beginning of the line
voice: 0, // zero-based voice
staffPos: { top: 0, height: 0, zero: 0 } // the Y-coordinates in the SVG for the staff system that contains the item. "zero" is the Y-coordinate of the middle-C.
}
2
3
4
5
6
# drag
See the Dragging page for more details.
# mouseEvent
The original event that triggered this callback.