常用的几个类型
onClick
HTML: 2 | 3 | 32 | 4
Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick
HTML: 2 | 3 | 32 | 4
Browser: IE4 | N4 | O 鼠标双击事件
onMouseDown
HTML: 2 | 3 | 32 | 4
Browser: IE4 | N4 | O 鼠标上的按钮被按下了
onMouseUp
HTML: 2 | 3 | 32 | 4
Browser: IE4 | N4 | O 鼠标按下后，松开时激发的事件
onMouseOver
HTML: 2 | 3 | 32 | 4
Browser: IE3 | N2 | O3 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove
HTML: 2 | 3 | 32 | 4
Browser: IE4 | N4 | O 鼠标移动时触发的事件
onMouseOut
HTML: 2 | 3 | 32 | 4
Browser: IE4 | N3 | O3 当鼠标离开某对象范围时触发的事件
若想检测鼠标左键、右键点击事件可以用
事件button 值来检测
例如
documentonMouseDown =function(ev){
var oEvent = ev||event;
alert(oEventbutton);
}
此时button= 0、1、2分别对应于 鼠标左中右
在DOM中。因为会有嵌套结构，因此如果鼠标指针父DIV移动到内部的子DIV上，会触发mouseout事件，这并不是bug或者什么歧义，因为mouseout的意思就是从一个元素移动到另一个元素上。并没有说另一个元素就不能是当前元素的子元素。但你的要求依然是可以实现的。就是利用事件冒泡。例如：
html中。
<html><head lang="en">
<meta charset="UTF-8">
</head>
<body style="padding:0;margin:0">
<div id="sDiv" style="height:500px;background:black;padding:1px">
<div id="cDiv" style="height:100px;margin:200px;background:red"></div>
</div>
</body>
<script>
js这样写：
windowonload = function(){documentgetElementById('sDiv')onmouseout = function(e){
var ev = e || windowevent;
var target = evtarget || evsrcElement;
if(targetid === 'sDiv' && (!evtoElement || evtoElementid !== 'cDiv')){
alert('鼠标移动出了父DIV元素。');
}
}
}
说白了。就是如果是移动到子元素中，不认为是移出父元素就好了，因此更加通用的写法如下：
function isParent (obj,parentObj){while (obj != undefined && obj != null && objtagNametoUpperCase() != 'BODY'){
if (obj == parentObj){
return true;
}
obj = objparentNode;
}
return false;
}
windowonload = function(){
documentgetElementById('sDiv')onmouseout = function(e){
var ev = e || windowevent;
var target = evtarget || evsrcElement;
if(targetid === 'sDiv' && (!evtoElement || !isParent(evtoElement, target))){
alert('鼠标移动出了父DIV元素。');
}
}
}
思路：
1获取当前鼠标的坐标，并取当前时间
2监听mousemove事件，一旦移动，重新获取坐标和当前时间
3将事件前后的时间相减所得的时间差和每次的坐标点记录下来，就可以知道每个坐标停留了多久。
可以按以下思路步骤来实现：
1、声明一个变量（如el），用来存放鼠标所在的元素节点。
2、在body元素上增加一个鼠标事件监听
3、使用事件对象中的target属性，每当鼠标经过一个元素时，就把它赋值给el变量
任何时候，读取el变量的值即为鼠标当前所在的元素。
示例代码：
var el = windowdocumentbody;//声明一个变量，默认值为bodywindowdocumentbodyonmouseover = function(event){
el = eventtarget;//鼠标每经过一个元素，就把该元素赋值给变量el
consolelog('当前鼠标在', el, '元素上');//在控制台中打印该变量
}
通过js 跨浏览器获取鼠标按键的值的方法
documentonmousedown = function( e ){
alert(getButton(e)) // ebutton W3C是获取鼠标按键 0 表示左键 1表示中键 2表示右键
而IE浏览器则是 1表示左键 4表示中间 2表示右键 这里的IE浏览器主要是IE8以下的浏览器
};
function getButton(e){
/
1、windowevent这个属性IE和Chrome都是支持的
2、但是Chrome也是支持W3C的
3、所以，如果说W3C和IE都支持的话，那么就已W3C做为标准化
/
if( e ){ // 作为第一次判断Chrome 就以W3C为标准了，去年远标java就说到这个问题。
return ebutton;
}else if( windowevent ){
switch( windoweventbutton ){
case 1 : return 0; // 返回鼠标左键的值
case 4 : return 1; // 返回鼠标中键的值
case 2 : return 2; // 返回鼠标右键的值
case 0 : return 2; // 返回鼠标右键的值 主要是360浏览器会返回了 在IE浏览器中
返回的0是代表没有按下鼠标键的时候所返回来的值
};
};
};
以上就是关于js鼠标事件有哪些全部的内容，包括:js鼠标事件有哪些、关于页面JS 鼠标触发事件的问题、有没有JS代码是用来获取鼠标停留在某个点的时间等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）