Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > JS判断鼠标从什么方向进入一个容器实例说明_javascript技巧

JS判断鼠标从什么方向进入一个容器实例说明_javascript技巧

WBOY
Freigeben： 2016-05-16 17:42:03
Original
1174 Leute haben es durchsucht

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


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

鼠标移动到上面，可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上，右，下，左”
所以结果值可以switch循环

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

原文代码是基于jquery的，后面我写了个原生的js效果，代码没有封装，给需要的朋友。由于firefox等浏览器不支持mouseenter,mouseleave事件，所以我暂时用mouseover,mouseout代替了，如果大家需要解决冒泡问题的话，还是自行搜索兼容性解决方法吧。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
Verwandte Etiketten：
JS判断 鼠标方向
Quelle：php.cn
Vorheriger Artikel：js中top/parent/frame概述及案例应用_基础知识 Nächster Artikel：ExtJS4 Grid改变单元格背景颜色及Column render学习_extjs
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Der Prozess zur Bestimmung, ob ein Element in einem Array vorhanden ist, ist ungültig Tut mir leid, dass ich Sie störe, aber ich habe zwei Stunden damit verbracht, das herauszu...
Aus 2024-04-03 13:03:54
0
1
377
Wie kann man feststellen, ob die Maus nicht mehr über einem Element schwebt? Ich möchte wissen, wie ich verhindern kann, dass die Maus über ein Element in Javascript f...
Aus 2024-03-31 13:28:28
0
1
272
Nicht erfasster Fehler: Ungültiges Datum: 21.01.2023 bei Verwendung der DateTIme-Auswahl in React Ich kann hier nicht sagen, wo das Problem liegt, da ich diesen React DateTime Picker gemäß...
Aus 2024-03-30 22:58:54
0
1
297
Erfahren Sie, wie Sie den Eigenschaftswert von CSS.registerProperty() abrufen Ich habe eine Eigenschaft über die Methode CSS.registerProperty registriert. Das Problem b...
Aus 2024-03-30 22:12:33
0
1
275
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage