Skip to content

Commit

Permalink
⚡️ Make all event listeners passive
Browse files Browse the repository at this point in the history
Fixes #92

If an event listener never invokes `preventDefault()`, it can be marked
as [passive][1].

We don't call `preventDefault()` anywhere in our code, so we can safely
mark all of our event listeners as passive.

[1]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners
  • Loading branch information
alecgibson committed May 31, 2024
1 parent 02391f8 commit 94d8937
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 6 deletions.
4 changes: 2 additions & 2 deletions src/quill-cursors/cursor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default class Cursor {
this._caretEl = caretContainerElement;
this._flagEl = flagElement;

caretContainerElement.addEventListener('mouseover', this._setHoverState);
caretContainerElement.addEventListener('mouseover', this._setHoverState, {passive: true});

return this._el;
}
Expand Down Expand Up @@ -127,7 +127,7 @@ export default class Cursor {
}

private _setHoverState(): void {
document.addEventListener('mousemove', this._toggleOpenedCursor);
document.addEventListener('mousemove', this._toggleOpenedCursor, {passive: true});
}

private _toggleOpenedCursor(e: MouseEvent): void {
Expand Down
2 changes: 1 addition & 1 deletion src/quill-cursors/quill-cursors.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ describe('QuillCursors', () => {
const editor = quill.container.getElementsByClassName('ql-editor')[0];
jest.spyOn(editor, 'addEventListener');
const cursors = new QuillCursors(quill);
expect(editor.addEventListener).toHaveBeenCalledWith('scroll', expect.anything());
expect(editor.addEventListener).toHaveBeenCalledWith('scroll', expect.anything(), {passive: true});

jest.spyOn(cursors, 'update');
const scroll = new Event('scroll');
Expand Down
6 changes: 3 additions & 3 deletions src/quill-cursors/quill-cursors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,9 @@ export default class QuillCursors {
}

private _registerDomListeners(): void {
const editor = this.quill.container.getElementsByClassName('ql-editor')[0];
editor.addEventListener('scroll', () => this.update());
editor.addEventListener('touchstart', this._handleCursorTouch);
const editor = this.quill.container.getElementsByClassName('ql-editor')[0] as HTMLElement;
editor.addEventListener('scroll', () => this.update(), {passive: true});
editor.addEventListener('touchstart', this._handleCursorTouch, {passive: true});
}

private _handleCursorTouch(e: MouseEvent): void {
Expand Down

0 comments on commit 94d8937

Please sign in to comment.