比如一个div元素,当鼠标mouseover事件触发时,我想知道从上左下右哪个方向移入进去的.
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了比如一个div元素,当鼠标mouseover事件触发时,我想知道从上左下右哪个方向移入进去的.相关的知识，希望对你有一定的参考价值。
比较一下事件对象中 clientX和clientY的值，如果CX是变大说明是从左进来的，变小则是从右进来的；同理CY如果变大说明是从上进来的，变小则是从下进来的。补充一下用onmousemove
var x2 = 0;
var y2 = 0;
oDiv.onmousemove = function(e)
var oEvent = e || event;
var x1 = oEvent.clientX;
var y1 = oEvent.clientY;
...//这里是判断部分，要考虑初次进入的情况我就不写了,判断最终都是要比较x1和x2的大小，y1和y2的大小
//判断完成后把获取的坐标值传给x2和y2以备下次比较
x2 = x1;
y2 = y1;
追问
那左上,右下这些呢?
能有具体点的例子么?
左上左下右上右下 就更复杂一些
你不但需要同时比较x和y的值
还要去比较你鼠标进来的第一个坐标点和你DIV的宽或者高的二分之一关系
不过可以提供给你一个变通的思路：
在DIV上下左右各建立一个紧邻的DIV，作为边界DIV，这样可以判断进入主DIV前，经过了哪个边界DIV，从而判断是从哪个方向进入的。本回答被提问者采纳 参考技术B 谁说不能判断的
js能算出鼠标距离dom相对位置, 和 绝对位置
再根据鼠标的x,y坐标变化规律,就能算出是那边进来的 参考技术C 一楼专家意见不错
JQuery--mouseover()与moseout()的区别
mouseover()与mouseout()区别
普通鼠标移入移出事件
语法:
mouseover()/mouseout()
功能:
当鼠标移入/移出到添加事件的元素或其子元素的时候，都会被触发
!!mouseenter/mouseleave是更好的鼠标移入事件!!
语法：
mouseenter()/mouseleave()
功能：
当鼠标移入/移出到添加事件的元素才会被触发,子元素不会被触发
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .father{ 8 width: 300px; 9 height: 200px; 10 background-color: #2AB89A; 11 border: 1px solid #cc6600; 12 } 13 14 .son{ 15 width: 100px; 16 height: 100px; 17 background-color:skyblue; 18 border: 1px solid #fff; 19 } 20 </style> 21 <script src="lib/jquery-1.12.2.js"></script> 22 <script> 23 $(function () { 24 // mouseover 25 /* $(‘.father‘).mouseover(function () { 26 console.log("moseouer"); 27 }); 28 29 // mouseout 30 $(‘.father‘).mouseout(function () { 31 console.log("mouseout"); 32 $(this).hide(); 33 });*/ 34 35 $(‘.father‘).mouseenter(function () { 36 console.log("mouseenter"); 37 }); 38 39 // mouseout 40 $(‘.father‘).mouseleave(function () { 41 console.log("mouseleave"); 42 $(this).hide(); 43 }); 44 }); 45 </script> 46 </head> 47 <body> 48 <h1>鼠标移出大盒子的时候才隐藏大盒子</h1> 49 <div class="father"> 50 外面的老爹 51 <div class="son"> 52 里面的孩子 53 </div> 54 </div> 55 </body> 56 </html>
以上是关于比如一个div元素,当鼠标mouseover事件触发时,我想知道从上左下右哪个方向移入进去的.的主要内容，如果未能解决你的问题，请参考以下文章
javascript如何判断鼠标是不是触发了onmouseover事件
JQuery--mouseover()与moseout()的区别
jQuery - 具有多个 div 的 mouseover/mouseout