jquery - VS容器窗口报告mouseenter事件的mouseover，为什么？

Question

首先，这不是问题，因为代码运行良好。我说的是 VS Containers。

代码:

$(document).on({
    mouseenter: function () {
        $(this).find('span').removeClass('hidden').addClass('show')
    },
    mouseleave: function () {
        $(this).find('span').removeClass('show').addClass('hidden')
    }
}, '.input .img-preview');

当我点击mouseenter函数时，它是

当我点击mouseleave函数时，它是

所以，我认为出了问题。然后，我尝试了另一个代码:

$(document).on('keypress', '.input', function () {

});

VS 检测正确:

我的问题:出了什么问题？还是 VS 的 bug？

更新:(基于@Liam 的评论)

我已将 mouseenter 替换为 mouseover，将 mouseleave 替换为 mouseout。有一个错误。

HTML 代码:

<div class="main input">
    <img src="~/Content/images/user.png" />
    <div>
        <span contenteditable="true" placeholder="Write you comment..."></span>
        <span>
            <i class="fa fa-camera" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Add image"></i>
            <i class="fa fa-smile-o" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Smiley"></i>
        </span>
        <br />
        <div class="img-preview">
            <span class="hidden" data-toggle="tooltip" data-placement="top" title="Delete image">
                <i class="fa fa-times-circle" aria-hidden="true"></i>
            </span>
            <img src="~/Content/images/hamy.jpg" />
        </div>
    </div>
</div>

请注意这些:

data-toggle="tooltip" data-placement="top" title="Add image"
data-toggle="tooltip" data-placement="top" title="Smiley"
data-toggle="tooltip" data-placement="top" title="Delete image"

我关注了this plug-in使用工具提示。但它仅适用于 mouseenter/mouseleave，不适用于 mouseover/mouseout。因此，如果我将 mouseenter 更改为 mouseover，它将不起作用。

这也意味着:mouseenter 不类似于mouseover。

Answer 1

mouseneter 和 mouseleave 只是 mouseover 和 mouseout 的精简重命名包装器。如果您检查jQuery source code你可以看到这个:

// Create mouseenter and mouseleave events
jQuery.each({
  mouseenter: "mouseover",
  mouseleave: "mouseout"
}, function( orig, fix ) {
  jQuery.event.special[ orig ] = {
      setup: function( data ) {
          jQuery.event.add( this, fix, data && data.selector ? delegate : withinElement, orig );
      },
      teardown: function( data ) {
          jQuery.event.remove( this, fix, data && data.selector ? delegate : withinElement );
      }
  };
});

所以这实际上只是将 (orig) mouseenter(jQuery.event.special[ orig ]) 事件重新映射到“修复” mouseover(jQuery.event.add( this, fix...)。因此，无论出于何种意图和目的，它们都是相同的。

vs 只是沿着树jqueryobject.events.mouseover 顺着这个。该对象结构在此处创建: jQuery.event.add( this, "mouseover"...

keypress 是“正确的”，因为 jQuery 尚未为 keypress 完成此映射。