竞技宝app:JS判断鼠标从什么方向进入一个容器实例说明_javascript技巧_脚本之家

2019-11-28 18:10栏目:竞技宝竞猜
TAG:

偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几块,然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法,是基于jquery的,说实话,其中的var direction = Math.round * + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白,原文中有一些英文注释我就不一一说明了。代码部分不是很多,我直接写了个示例。

常见的有以下8个: mousedown:鼠标的键钮被按下。 mouseup:鼠标的键钮被释放弹起。 click:单击鼠标的键钮。 dblclick:鼠标的键钮被按下。 contextmenu :弹出右键菜单。 mouseover:鼠标移到目标的上方。 mouseout:鼠标移出目标的上方。 mousemove:鼠标在目标的上方移动。 mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click。因此一个点击事件,通常会激发几个鼠标事件。

判断鼠标进入方向

请在这里点击,测试一个点击到底捆绑了多少种鼠标事件?!

方向反馈

清空

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 鼠标移动到上面,可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上,右,下,左” 所以结果值可以switch循环

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:竞技宝app:JS判断鼠标从什么方向进入一个容器实例说明_javascript技巧_脚本之家