Событие Javascript «mouseenter» запускается дважды в первый раз - Meteor

В моем приложении Meteor событие «mouseenter» запускается дважды в первый раз, когда я накладываю мышь на элемент. После первого раза он работает правильно.Событие Javascript «mouseenter» запускается дважды в первый раз - Meteor

Кроме того, обработчик события запускается один раз, когда я запускаю приложение, не перемещая мышь.

Вот код:

Template.filters.events({ 
'mouseenter .filters-box': (event, element)=>{ 
    var target = Template.instance().$(event.target).children('.filters-popup')[0] 
    console.log('enter'); 
    console.log(target); 
    if(!target){ 
     return; 
    } 

    var prevWidth = target.style.width; 
    target.style.width = 'auto'; 
    var endWidth = getComputedStyle(target).width; 
    target.style.width = prevWidth; 

    target.offsetHeight; 

    target.style.width = endWidth; 

}, 
'mouseleave .filters-box': (event, element)=>{ 
    var target = Template.instance().$(event.target).children('.filters-popup')[0]; 
    console.log('leave'); 
    console.log(target); 
    if(!target){ 
     return; 
    } 

    target.style.width = getComputedStyle(target).width; 
    target.offsetHeight; 
    target.style.width = 0; 
} 
});

Это выход в консоли браузера:

Navigated to http://localhost:3000/ 
filters.js:26 enter 
filters.js:27 undefined

Затем, когда я двигаю мышь в и из элемента:

filters.js:26 enter 
filters.js:27 <div class="filters-popup" style="width: 0px;">…</div> 
filters.js:26 enter 
filters.js:27 <div class="filters-popup" style="width: 0px;">…</div> 
filters.js:44 leave 
filters.js:45 <div class="filters-popup" style="width: 0px;">…</div> 
filters.js:44 leave 
filters.js:45 <div class="filters-popup" style="width: 0px;">…</div>

Следующие несколько раз я запускаю только одно событие для каждого типа:

filters.js:26 enter 
filters.js:27 <div class="filters-popup" style="width: 0px;">…</div> 
filters.js:44 leave 
filters.js:45 <div class="filters-popup" style="width: 0px;">…</div>

Я пробовал с event.preventDefault(); и event.stopPropagation(); методов, но он все еще не работает правильно.

источник

2016-04-22 Francisco Rubin Capalbo

У меня также есть эта проблема с Метеор. even.preventDefault() ничего не делает для меня. Вы когда-нибудь находили решение этого? –

Есть ли у вас <div> какие-либо дочерние элементы? Вероятно, они также запускают событие mouseenter. Вы можете положить event.preventDefault() в начале вашего обработчика событий. Это должно предотвратить запуск любых других обработчиков событий.

Если событие запускается, когда мышь находится внутри div во время запуска, я бы действительно подумал, что он запускается. Если позиция/размер div изменяется во время рендеринга, вы можете получить его, даже если мышь находится в другом месте, чем где заканчивается div. Потенциальное решение состоит в том, чтобы объявить обработчик событий только после того, как ваш рендеринг будет выполнен, что-то вроде помещения вещей в вызов Meteor.startup.

источник

2016-04-22 16:04:21

Я пробовал с event.preventDefault(); и event.stopPropagation(); без результата ... –

Событие Javascript «mouseenter» запускается дважды в первый раз - Meteor

ответ

Смежные вопросы