jsmouse_js中鼠标移动事件触发时

❶ js中鼠标移动事件触发时,如何获得当前鼠标在哪一个元素上

首先，获取到事件对象e，

事件来源，IE下面对应的是srcElement，FF下面是target。

下面是一个简单的例子，兼容IE和FireFox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript">
function init() {
document.body.onmousemove = function(e) {
if (!e) {
e = window.event;
}
else {
e.srcElement = e.target;
}
document.getElementById("divDebug").innerHTML = "mousemove (" + e.clientX + "," + e.clientY + ") srcElement=" + e.srcElement.tagName + "[" + e.srcElement.id + "]";
};
}
</script>
</head>
<body onload="init()">
<div id="root">
<div id="divDebug"></div>
<div id="div2">div</div>
<span id="span1">span</span>
<a href="#" id="link1">link</a>
</div>
</body>
</html>

❷ js鼠标事件有哪些

js 鼠标事件详细
常用的几个类型

onClick
HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击

onDblClick
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标双击事件

onMouseDown
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标上的按钮被按下了

onMouseUp
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标按下后，松开时激发的事件

onMouseOver
HTML: 2 | 3 | 3.2 | 4
Browser: IE3 | N2 | O3 当鼠标移动到某对象范围的上方时触发的事件

onMouseMove
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N4 | O 鼠标移动时触发的事件

onMouseOut
HTML: 2 | 3 | 3.2 | 4
Browser: IE4 | N3 | O3 当鼠标离开某对象范围时触发的事件

若想检测鼠标左键、右键点击事件可以用
事件button 值来检测
例如
document.onMouseDown =function(ev){
var oEvent = ev||event;
alert(oEvent.button);
}
此时button= 0、1、2分别对应于鼠标左中右

❸ JS鼠标事件大全 JS鼠标事件有哪些

1、如图首先在一个文件夹下创建index.html文件。

❹ js怎么设置鼠标位置

在前段使用JavaScript开发获取鼠标当前位置来计某个功能，如何获取鼠标当前的位置，其实很多人都不知道怎么做，为此我为大家整理推荐了相关的知识，希望大家喜欢。

js设置鼠标位置的方法

新建一个html代码页面，在这个html页面找到<body>,然后在这个<body>里创建一个用来显示坐标位置的<div>,并给这个<div>添加一个id。如图

创建<div>的代码：

4页面所有代码：

<!DOCTYPE html>

<html>

<head>

<title>js获取鼠标位置</title>

document.onmousemove = function(e){

var loc = "当前位置 x:"+e.pageX+",y:"+e.pageY

document.getElementById("point-loc").innerHTML = loc;

}

</script>

</head>

<body>

</body>

❺ JavaScript中mouseout函数一般位置

与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
解决两者的区别，看下面引用的例子：
当为某个容器绑定了 onmouseover 或者onmouseout 事件时，如果这个容器中有其它元素节点，那么鼠标在内部移动时会频繁触发 onmouseover和onmouseout 事件。
而我想要的效果是：事件仅在鼠标进入/离开元素区域触发一次，当鼠标在元素区域内部移动的时候不会触发。
为什么会出现这个原因呢？其实是因为事件冒泡导致的。当鼠标移上或者移出容器中的子节点时，会分别触发mouseover和mouseout事件，紧随着dom树向上冒泡传递，直到被事件处理程序（监听器）捕获捕获或者冒泡到根节点（document或者window），也就是说事件会向它的父级对象派发。
知道了问题产生原因，那么解决起来是不是也很简单呢？最初我想的是取消事件冒泡，使用event.cancelBubble = true（IE）和e.stopPropagation()（其它浏览器），但是简单测试后发现貌似没有什么效果，问题依旧，貌似冒泡停止不了，原因不明。（补充：我是测试将容器中的a链接节点取消冒泡，但是发现鼠标移上移下还会触发事件。a节点下还有span节点。难道要将容器中所有节点都取消冒泡才行？有心人可以测试，如果真的这样，那也太恶心了，要是N多的节点，难道都要停止冒泡下？）
其实在IE下鼠标事件有个 mouseEnter 和 mouseLeave，这个就是移进和移处容器时触发一次，在内部移动则不会触发，遗憾的是只有IE支持。我们现在要做的就是“为非IE浏览器添加mouseEnter和mouseLeave支持”。
我翻阅了网络最新开源的JS库tangram，看了里面的处理，发现貌似是单独处理了非IE浏览器下的事件，使用一个叫“.event._eventFilter._crossElementBoundary(listener, e)”的方法修正mouseover和mouseout，然后封装了个mouseEnter和mouseLeave事件。
.event._eventFilter._crossElementBoundary = function(listener, e){
var related = e.relatedTarget,
current = e.currentTarget; if(typeof related == 'undefined'){ return listener.call(current, e);
} // 如果current和related都是body，contains函数会返回false
// Firefox有时会把XUL元素作为relatedTarget
// 这些元素不能访问parentNode属性
// thanks jquery & mootools
//如果current包含related，说明没有经过current的边界
//注：.dom.contains是个定义的检测节点是否包含的函数，下面我会讲到
if(related === false || current == related || related.prefix == 'xul' || .dom.contains(current, related)){ return ;
} //调用执行
return listener.call(current, e);
};123456789101112131415161718

网络的方法我并不喜欢，首先它只对非IE浏览器进行了处理，当然，它又进行了封装，可以直接使用mouseEnter和mouseLeave；但是，我们做普通开发，没必要这么封装，我只是想要简单的去掉mouseover和mouseout的这个恼人特性。
而jQuery则不是这么做的，它是直接对IE和其它所有浏览器下的mouseover和mouseout事件进行了修正。参考jQuery，我得到了我目前所有的代码。
首先，介绍个判断节点对象是否包含的函数contains.
function contains(p,c){
return p.contains ?
p != c && p.contains(c) : !!(p.compareDocumentPosition(c) & 16);
}1234

然后就是重点的了，这里我们在IE下用到了fromElement和toElement，这两个是IE下的鼠标移上去时和移出时的节点对象。
function fixedMouse(e,target){
var related, type=e.type.toLowerCase();//这里获取事件名字
if(type=='mouseover'){
related=e.relatedTarget||e.fromElement
}else if(type='mouseout'){
related=e.relatedTarget||e.toElement
}else return true; return related && related.prefix!='xul' && !contains(target,related) && related!==target;
}12345678910

然后我们怎么用呢？比如在绑定事件时，
//addListener为封装的事件绑定函数addListener(target,'mouseover',function(e){
e=e||window.event; if(fixedMouse(e, target)){ //do something
}
},false);1234567

这样就会只在移入移出target节点时触发mouseover和mouseout了。
当然，你也可以将上面的代码单独封装成mouseEnter和mouseLeave，这样可以以后调用时更好区别mouseover和mouseout。

导航:首页 > 编程语言 > jsmouse

jsmouse

js设置鼠标位置的方法

与jsmouse相关的资料

友情链接