dijit/_OnDijitClickMixin

Authors:Bill Keese Project owner:Bill Keese since:V1.7

Contents

• dijit/_OnDijitClickMixin
  • Introduction

Introduction

dijit._OnDijitClickMixin is a useful mixin for widgets that need to be accessible, that require nodes to be “clicked” via the keyboard in addition to via the mouse(or a touch event).

For example, in the code below the user can tab to the <span> node and press either the ENTER or SPACE key, and it will have the same effect as clicking the span with the mouse:

require([
    "dojo/ready",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_OnDijitClickMixin",
    "dojo/_base/declare",
    "dojo/dom"
], function(ready, _WidgetBase, _TemplatedMixin, _OnDijitClickMixin, declare, dom){
    ready(function(){
        var MyButton = declare([_WidgetBase, _TemplatedMixin, _OnDijitClickMixin], {
            templateString: "<span tabIndex=0 data-dojo-attach-event='ondijitclick: onClick'>click me</span>",
            onClick: function(evt){
                alert("Awesome!!");
            }
        });
        new MyButton({}, dom.byId("myButton"));
    });
});

require([ "dojo/ready", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_OnDijitClickMixin", "dojo/_base/declare", "dojo/dom" ], function(ready, _WidgetBase, _TemplatedMixin, _OnDijitClickMixin, declare, dom){ ready(function(){ var MyButton = declare([_WidgetBase, _TemplatedMixin, _OnDijitClickMixin], { templateString: "<span tabIndex=0 data-dojo-attach-event='ondijitclick: onClick'>click me</span>", onClick: function(evt){ alert("Awesome!!"); } }); new MyButton({}, dom.byId("myButton")); }); });

<div id="myButton">this will be replaced by the widget</div>

<div id="myButton">this will be replaced by the widget</div>

Table of Contents

• dijit/_OnDijitClickMixin
  • Introduction