使用jquery中的鼠标移入移出会作用到子元素身上的问题

今天在使用jquery给元素添加鼠标移入移出事件时，发现当鼠标移动到该元素的子元素上时，也会触发一次改事件，查找了一下解决方法，特此记录。
参考：https://blog.csdn.net/qq_44782585/article/details/109486300

mouseover()鼠标移入（移入子元素也触发）
mouseout()鼠标移出（离开子元素也触发）
mouseenter()鼠标移入（移入子元素不触发）
mouseleave()鼠标移出（离开子元素不触发）

还可以加入stop事件

stop的在JQ中的使用场景：
stop();//停止当前动画，继续下一个动画
stop(true);//清除元素的所有动画
stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

示例：

$(this).stop().animate({ 
     height: "246px",
},200);