DHTMLX Docs & Samples Explorer

onClick and onTouch Events

  • onClick - occurs when the user clicks the left mouse button on an enabled, not complex menu item;
  • onTouch - occurs when the user first hovers over any menu item by a mouse cursor (is not applicable for the contextual menu).

These events call user-defined handlers (if there are any) and pass the following parameters:

  • id - id of the clicked/hovered menu item;
  • zoneId (only for onClick event in case of a Contextual Menu) - id of the contextual menu zone;
  • casState(only for onClick event) - whether the key “Ctrl”, “Alt”, or “Shift” was pressed with click or not.
        menu.attachEvent("onClick", function(id, zoneId, casState){});
        menu.attachEvent("onTouch", function(id){});

Now let's attach an event handler for onClick event:

        menu.attachEvent("onClick", function(id, zoneId, casState){
            alert("element "+id+" was clicked");
            //  ctrl
            if (casState["ctrl"] == true) {
                    // ctrl key was pressed with click
            } else {
                    // ctrl key was not pressed with click
            }
            // alt
            if (casState["alt"] == true) {
                    // alt key was pressed with click
            } else {
                    // alt key was not pressed with click
            }
            // shift
            if (casState["shift"] == true) {
                    // shift key was pressed with click
            } else {
                    // shift key was not pressed with click
            }
        });