Skip to content

fix: avoid duplicate click handlers accumulating in _moveManual #53

@coderabbitai

Description

@coderabbitai

Problem

Each call to _moveManual in l2t-paper-slider.js attaches a new anonymous click listener to every .slider__dot element via dotElems[i].addEventListener('click', ...). Because anonymous functions cannot be removed with removeEventListener, every subsequent call (e.g. from attached's setTimeout and from _reInit's setTimeout triggered by _countSlides) stacks an additional handler on each dot. Over time this causes movePos to be called multiple times per click.

Suggested fix

Replace per-dot anonymous listeners with a single delegated listener stored on the instance, added only once:

_moveManual: function () {
  var this$ = this;
  var dotElems = this.$.container.querySelectorAll('.slider__dot'), i;
  for (i = 0; i < dotElems.length; ++i) {
    dotElems[i].setAttribute("aria-label", "Slide " + parseInt(dotElems[i].getAttribute('aria-posinset')) + " selector");
  };
  if (!this._dotClickListener) {
    this._dotClickListener = function (e) {
      var dot = e.target.closest('.slider__dot');
      if (dot) this$.movePos(dot.getAttribute('aria-posinset') - 1);
    };
    this.$.container.addEventListener('click', this._dotClickListener);
  }
  if (dotElems.length) {
    this._dotStyles = window.getComputedStyle(dotElems[0]);
  }
},

The stored _dotClickListener reference also allows cleanup in detached.

References

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions