2 foxaiwushang foxaiwushang 于 2016.02.24 15:26 提问

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,直到动画结束后,再判断当前鼠标位置。
            该如何实现?

3个回答

cyssxt
cyssxt   2016.02.24 15:54

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

showbo
showbo   Ds   Rxr 2016.02.24 16:32

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

beacon_2011
beacon_2011   Rxr 2016.02.25 10:00

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!