MDL-70580 core: Tree nodes should check if they were clicked directly

[moodle.git] / lib / amd / src / tree.js

diff --git a/lib/amd/src/tree.js b/lib/amd/src/tree.js
index 4ba8615..1a97cac 100644 (file)
--- a/lib/amd/src/tree.js
+++ b/lib/amd/src/tree.js
@@ -349,12 +349,12 @@ define(['jquery'], function($) {
      * Handle a key down event - ie navigate the tree.
      *
      * @method handleKeyDown
-     * @param {Object} item is the jquery id of the parent item of the group.
      * @param {Event} e The event.
      */
      // This function should be simplified. In the meantime..
      // eslint-disable-next-line complexity
-    Tree.prototype.handleKeyDown = function(item, e) {
+    Tree.prototype.handleKeyDown = function(e) {
+        var item = $(e.target);
         var currentIndex = this.getVisibleItems().index(item);
 
         if ((e.altKey || e.ctrlKey || e.metaKey) || (e.shiftKey && e.keyCode != this.keys.tab)) {
@@ -483,16 +483,20 @@ define(['jquery'], function($) {
      * Handle a click (select).
      *
      * @method handleClick
-     * @param {Object} item The jquery id of the parent item of the group.
      * @param {Event} e The event.
      */
-    Tree.prototype.handleClick = function(item, e) {
-
+    Tree.prototype.handleClick = function(e) {
         if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) {
             // Do nothing.
             return;
         }
 
+        var item = $(e.target);
+
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+
         // Update the active item.
         item.focus();
 
@@ -506,12 +510,10 @@ define(['jquery'], function($) {
      * Handle a focus event.
      *
      * @method handleFocus
-     * @param {Object} item The jquery id of the parent item of the group.
      * @param {Event} e The event.
      */
-    Tree.prototype.handleFocus = function(item) {
-
-        this.setActiveItem(item);
+    Tree.prototype.handleFocus = function(e) {
+        this.setActiveItem($(e.target));
     };
 
     /**
@@ -520,20 +522,12 @@ define(['jquery'], function($) {
      * @method bindEventHandlers
      */
     Tree.prototype.bindEventHandlers = function() {
-        var thisObj = this;
-
         // Bind event handlers to the tree items. Use event delegates to allow
         // for dynamically loaded parts of the tree.
         this.treeRoot.on({
-            click: function(e) {
-              return thisObj.handleClick($(this), e);
-            },
-            keydown: function(e) {
-              return thisObj.handleKeyDown($(this), e);
-            },
-            focus: function() {
-              return thisObj.handleFocus($(this));
-            },
+            click: this.handleClick.bind(this),
+            keydown: this.handleKeyDown.bind(this),
+            focus: this.handleFocus.bind(this),
         }, SELECTORS.ITEM);
     };