问题描述

Javascript 鼠标监听事件

                纯原生，不使用jQuery
            鼠标移入元素后出发 onmouseover 当动画执行完毕之后再判断当前鼠标位置是

否在元素内或外，若在外则执行 onmouseout 若在元素内则不做任何处理。

        <div id= "itemTitle" class="itemTitle">
                        <span class="topline"></span>
                        <p></p>
                        <span class="bottomline"></span>
                </div>
                假设上方这样一个结构，
                window.onload = function(){
            itemTitle = document.getElementById("itemTitle");
            topline = document.querySelector(".topline");
            bottomline = document.querySelector(".bottomline");
            itemTitle.addEventListener("mouseover",titAnimat);
            itemTitle.addEventListener("transitionend",mouseOut);
        }

                function mouseOut(){
            itemTitle.addEventListener("mouseout",titInit);
        }

            **想要的结果**：当鼠标移入时触发mouseover，直到动画结束后，再判断当前鼠标位置。
            该如何实现？

解决方案

这个代码里没有看到有动画内容?如果是自己通过css样式写的，建议通过定时器实现。

解决方案二：

用个全局变量记录住是否在容器内，还要修改你的titAnimat这个函数，执行动画的代码完毕后判断这个变量如果是true（容器内）就执行下mouseOut()

解决方案三：

mouseover事件里移除mouseover事件，等动画播完了再加回来，或者动画采用层，遮罩住这个控件，就不会再出发mouseover事件了