您的位置：首页 > 其它

Event—跟随鼠标移动的div实例阻止冒泡

2017-06-29 17:20 260 查看

html部分

<body style="height: 2000px;">
<div id="div1"></div>
</body>


js部分

<script>
window.onload = function() {

//event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。
//如果一个函数是被事件调用的那么，这个函数定义的第一个参数就是事件对象
//clientX[Y] : 当一个事件发生的时候，鼠标到页面可视区的距离
//onmousemove : 当鼠标在一个元素上面移动的触发
//触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

var oDiv = document.getElementById('div1');

document.onmousemove = function(ev) {

var ev = ev || event;

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

oDiv.style.left = ev.clientX + 'px';
oDiv.style.top = ev.clientY + scrollTop + 'px';    //可视区距离(clientY)加上滚动条滚动距离(scrollTop)

}

}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航