I am unsure whether this is configurable at all, but at present, using keen-slider
impacts our lighthouse scores on a project I'm working on for the following reasons:
https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools
I've investigated and can see that there are a few places where the event listeners never call preventDefault
, or optionally call preventDefault
based on configuration, and can therefore identify if they are passive
or not.
Without this flag, the browser will wait for events to complete before deciding if it should take over scrolling. With the flag, the browser knows immediately that it can scroll without waiting.
Multiple event listeners in this block can identify that they are passive
event listeners that will not prevent scrolling:
|
function eventsAdd() { |
|
eventAdd(window, 'orientationchange', sliderResizeFix) |
|
eventAdd(window, 'resize', () => sliderResize()) |
|
eventAdd(container, 'dragstart', function (e) { |
|
if (!isTouchable()) return |
|
e.preventDefault() |
|
}) |
|
eventAdd(container, 'mousedown', eventDragStart) |
|
eventAdd(container, 'mousemove', eventDrag) |
|
eventAdd(container, 'mouseleave', eventDragStop) |
|
eventAdd(container, 'mouseup', eventDragStop) |
|
eventAdd(container, 'touchstart', eventDragStart) |
|
eventAdd(container, 'touchmove', eventDrag) |
|
eventAdd(container, 'touchend', eventDragStop) |
|
eventAdd(container, 'touchcancel', eventDragStop) |
|
eventAdd(window, 'wheel', eventWheel, { |
|
passive: !1, |
|
}) |
|
} |
dragstart
|
eventAdd(container, 'dragstart', function (e) { |
|
if (!isTouchable()) return |
|
e.preventDefault() |
|
}) |
Potentially above should indicate
passive
flag when
isTouchable()
returns
false
eventDragStart
|
function eventDragStart(e) { |
|
if (touchActive || !isTouchable() || eventIsIgnoreTarget(e.target)) return |
|
touchActive = true |
|
touchJustStarted = true |
|
touchIdentifier = eventGetIdentifier(e) |
|
eventIsSlide(e) |
|
moveAnimateAbort() |
|
touchIndexStart = trackCurrentIdx |
|
touchLastX = eventGetX(e).x |
|
trackAdd(0, e.timeStamp) |
|
hook('dragStart') |
|
} |
Doesn't appear to
preventDefault
, so the following references should use the
passive
flag:
|
eventAdd(container, 'mousedown', eventDragStart) |
|
eventAdd(container, 'touchstart', eventDragStart) |
eventDragStop
|
function eventDragStop(e) { |
|
if ( |
|
!touchActive || |
|
touchIdentifier !== eventGetIdentifier(e, true) || |
|
!isTouchable() |
|
) |
|
return |
|
container.removeAttribute(attributeMoving) |
|
touchActive = false |
|
moveWithSpeed() |
|
|
|
hook('dragEnd') |
|
} |
Doesn't appear to
preventDefault
, so the following references should use the
passive
flag:
|
eventAdd(container, 'mouseleave', eventDragStop) |
|
eventAdd(container, 'mouseup', eventDragStop) |
|
eventAdd(container, 'touchend', eventDragStop) |
|
eventAdd(container, 'touchcancel', eventDragStop) |
wheel
|
eventAdd(window, 'wheel', eventWheel, { |
|
passive: !1, |
|
}) |
Seems to indicate it is never passive, but is passive when
isTouchable()
returns
false
:
|
function eventWheel(e) { |
|
if (!isTouchable()) return |
|
if (touchActive) e.preventDefault() |
|
} |