diff --git a/src/js/clickable-component.js b/src/js/clickable-component.js index d919b633e3..f267c8e0ee 100644 --- a/src/js/clickable-component.js +++ b/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); } diff --git a/test/unit/clickable-component.test.js b/test/unit/clickable-component.test.js index cdc4119f2e..8a3f77c54f 100644 --- a/test/unit/clickable-component.test.js +++ b/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(); +});