js鼠标事件的监听事件 js鼠标事件触发

js监听鼠标是否在窗口范围内

第一点：页面中的窗口都是绝对定位于body元素的。

而dom的事件机制是向上不断冒泡的

例如

body div#main div#dialog button#btnLink

我点了一下button#btnLink按钮，这时候 click事件就会一层一层的向上冒泡，button#btnLink是第一个被触发的，然后紧接着是div#dialog，然后是div#main ，最后是body ，这几个都会被触发click事件。

既然知道了事件的冒泡机制就比较简单了吧，直接在body上面绑定一个鼠标移动事件，

这时候假定你要监听的窗口是div#dialog 这个div元素，那么事件源就是从 div#dialog上发出来的（包括它的子孙元素），所有非div#dialog（包括它的子孙元素）所触发的事件，都不是我们要去管的。

所有我们要做的就是 在body上面绑定一个鼠标移动事件，然后判断事件源是不是div#dialog触发的就可以了。

代码我就不贴了，就讲讲原理。

相关问答

Q1: JS如何判断鼠标滚轮事件分析

我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。先分析原理：我们是通过判断鼠标滚动的获取一个值，然后根据这个值判断滚动的方向。然而不同浏览器有不同的获取方法，所以要分浏览器写方法。 不同浏览器不同的事件 首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请先去了解鼠标滚轮(mousewheel)和DOMMouseScroll事件。过程中需要添加事件监听：兼容firefox采用addEventListener监听。 js返回数值判断滚轮上下 判断滚轮向上或向下在浏览器中也要考虑兼容性（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上也是不一致，但是含义一致，detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。 具体的代码如下所示： label for=wheelDelta滚动值:/label(IE/Opera)input type=text id=wheelDelta/ label for=detail滚动值:(Firefox)/labelinput type=text id=detail/ script type=text/javascript var scrollFunc=function(e){ e = e || window.event; var t1=document.getElementById(wheelDelta); var t2=document.getElementById(detail); if(e.wheelDelta){//IE/Opera/Chrome t1.value=e.wheelDelta; }else if(e.detail){//Firefox t2.value=e.detail;}} /*监听事件*/

Q2: js 判断当前鼠标在哪个元素上

可以按以下思路步骤来实现：

1、声明一个变量（如el），用来存放鼠标所在的元素节点。

2、在body元素上增加一个鼠标事件监听

3、使用事件对象中的target属性，每当鼠标经过一个元素时，就把它赋值给el变量

任何时候，读取el变量的值即为鼠标当前所在的元素。

示例代码：

var el = window.document.body;//声明一个变量，默认值为body

window.document.body.onmouseover = function(event){

  el = event.target;//鼠标每经过一个元素，就把该元素赋值给变量el

  console.log('当前鼠标在', el, '元素上');//在控制台中打印该变量

}

Q3: 什么用javascript让一个对象同时监听鼠标单击和鼠标双击事件

input name="test" id="test" type="button" onmouseup="c()" value="单双击测试"/

注意不是onclick，是onmouseup

var count = 0;

var timer ;

function c(){

count ++;

timer = window.setTimeout(function(){

if(count==1) alert("单击");

else alert("双击");

window.clearTimeout(timer);

count=0;

},300)

}

关于js鼠标事件的监听事件和js鼠标事件触发的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。