fix: prevent dupe events on enabled ClickableComponents (#4316)

Prevent ClickableComponents re-adding event listeners each time enabled() is called.

* Keeps track of enabled state (this.enabled_)
* enable() doesn't do anything if the component is enabled, so the event handlers are not re-added

Fixes #4312

src/js/clickable-component.js

@@ -141,28 +141,30 @@ class ClickableComponent extends Component {
    * Enable this `Component`s element.
    */
   enable() {
-    this.removeClass('vjs-disabled');
-    this.el_.setAttribute('aria-disabled', 'false');
-    if (typeof this.tabIndex_ !== 'undefined') {
-      this.el_.setAttribute('tabIndex', this.tabIndex_);
+    if (!this.enabled_) {
+      this.enabled_ = true;
+      this.removeClass('vjs-disabled');
+      this.el_.setAttribute('aria-disabled', 'false');
+      if (typeof this.tabIndex_ !== 'undefined') {
+        this.el_.setAttribute('tabIndex', this.tabIndex_);
+      }
+      this.on(['tap', 'click'], this.handleClick);
+      this.on('focus', this.handleFocus);
+      this.on('blur', this.handleBlur);
     }
-    this.on('tap', this.handleClick);
-    this.on('click', this.handleClick);
-    this.on('focus', this.handleFocus);
-    this.on('blur', this.handleBlur);
   }
 
   /**
    * Disable this `Component`s element.
    */
   disable() {
+    this.enabled_ = false;
     this.addClass('vjs-disabled');
     this.el_.setAttribute('aria-disabled', 'true');
     if (typeof this.tabIndex_ !== 'undefined') {
       this.el_.removeAttribute('tabIndex');
     }
-    this.off('tap', this.handleClick);
-    this.off('click', this.handleClick);
+    this.off(['tap', 'click'], this.handleClick);
     this.off('focus', this.handleFocus);
     this.off('blur', this.handleBlur);
   }

test/unit/clickable-component.test.js

@@ -71,3 +71,25 @@ QUnit.test('handleClick should not be triggered when disabled', function() {
   testClickableComponent.dispose();
   player.dispose();
 });
+
+QUnit.test('handleClick should not be triggered more than once when enabled', function() {
+  let clicks = 0;
+
+  class TestClickableComponent extends ClickableComponent {
+    handleClick() {
+      clicks++;
+    }
+  }
+
+  const player = TestHelpers.makePlayer({});
+  const testClickableComponent = new TestClickableComponent(player);
+  const el = testClickableComponent.el();
+
+  testClickableComponent.enable();
+  // Click should still be handled just once
+  Events.trigger(el, 'click');
+  QUnit.equal(clicks, 1, 'no additional click handler when already enabled ClickableComponent has been enabled again');
+
+  testClickableComponent.dispose();
+  player.dispose();
+});