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调用中。

Javascript事件'mouseenter'首次触发两次 - Meteor

1 个答案: