Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Passive event listener in Select Tag

Tags:

Click on select element shows this warning:

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

The problem is that this also expand the height of HTML page in Google Chrome. Tested in Chrome Version 59.0.3071.86 (Official Build) (64-bit) In firefox this does not occur.

Simple code: https://jsfiddle.net/gurigraphics/2399mnyb

<div>   <select>     <option>Option</option>   </select> </div>

The same happens with "mouse hover" if you customize the scroll bar.

What is the better solution? I found this theory: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

like image 210
Gurigraphics Avatar asked Jun 18 '17 21:06

Gurigraphics


People also ask

How do you mark a passive event listener?

you should use the passive option in . addEventListener(), which doesn't block the event while your listener executes. document. addEventListener("mousewheel", somefunction(), { passive: false });

What is eventListener in JavaScript?

An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard.


1 Answers

Chrome automatically logs whenever a scroll-blocking event occurs. Using Chrome's DevTools, I checked that there is no mousewheel listeners on the select box, and it still happens.

I suggest turning off 'Verbose' in the console.

like image 141
Aiden Waterman Avatar answered Sep 22 '22 15:09

Aiden Waterman