Javascript事件'mouseenter'首次觸發兩次 - Meteor

Question

在我的Meteor應用程序中，第一次將鼠標放在元素上時，事件'mouseenter'被觸發兩次。 在第一次它正常工作之后。

此外，當我啟動應用程序而不移動鼠標時，事件處理程序運行一次。

這是代碼：

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（）; 方法，但它仍然無法正常工作。

Answer 1

你的<div>是否包含任何子元素？ 它們可能也引發了鼠標中心事件。 您可以將event.preventDefault()放在事件處理程序的開頭。 這應該可以防止觸發任何其他事件處理程序。

如果在啟動期間當鼠標在div內時觸發事件，我的確會想象它會被觸發。 如果在渲染過程中div的位置/大小發生變化，即使鼠標位於與div結束的位置不同的位置，也可以獲得它。 一個潛在的解決方案是只在渲染完成后聲明事件處理程序，有點像將事物放入Meteor.startup調用中。