Не работает removeEventListener
Не могу понять в чем ошибка.При ресайзе экрана от большего к меньшему, при mouseenter на li, начиная с 700px должен удаляться обработчик, но он не удаляется. Все равно лишка красится. Буду признателен за помощь
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .red { color: red; } li { border: 1px solid black; width: 200px; } </style> </head> <body> <ul> <li> something </li> </ul> <script> let li = document.querySelector('li') function fn() { function addClass() { li.classList.add('red') } if(window.innerWidth > 700) { li.addEventListener('mouseenter', addClass) }else { li.removeEventListener('mouseenter', addClass) } } fn() window.addEventListener('resize', function () { fn() }) </script> </body> </html> |
Во-первых и главных: при каждом ресайзе локальная функция addClass создаётся заново во время вызова fn. Соответственно та addClass которую пытается убрать removeEventListener при ширине меньше 700 - это совсем не та addClass что была установлена до этого, а совсем новая, только что созданная. Следовало бы вынести addClass за пределы fn.
Во-вторых: во время ресайза обработчик вызывается несколько раз и, хотя одна функция и не может быть повешена на одно событие дважды - всё равно получается весьма некрасиво. В-третьих: логичнее и надёжнее было бы просто один раз повесить addClass на mouseenter и уже внутри addClass проверять размеры. |
Спасибо за совет! Буду разбираться.
|
alexwhite,
let li = document.querySelector('li'); function addClass() { if(window.innerWidth > 700) li.classList.add('red'); } li.addEventListener('mouseenter', addClass); |
вау, j0hnik. Большое спасибо! Заработало как часики.
|
Часовой пояс GMT +3, время: 23:34. |