JS——事件详情(鼠标事件)

鼠标位置

1》可视区位置:clientX、clientY

跟着鼠标移动的div案例

代码如下图:

 

这个案例,运用到前一篇文章中的event事件来处理。获取div的left和top值,当鼠标移动时,div的left和top值跟着鼠标位置改变而改变。(注意的是:需要给div设置绝对定位)

演示效果如下图:

但是!!!

当我给body设置高度时,改变body的高度,这个案例效果就发生变化了,变得很诡异。

代码如下图:

效果图显示如下:

为什么给body设置了一个2000px的高度后,这个案例就变得如此诡异呢???

原来,clientX和clientY解释为:鼠标的可视区坐标!!!!

看下面这张图,来简单解释一下:

修改代码,完成完整的案例。代码如下图:

其中的scrollTop可以参考本人的前面文章,里面有讲解scrollTop的语法和用法等  

【跳转自:https://www.cnblogs.com/ytraister/p/10947425.html中的(5)document.documentElement.scrollTop(获取滚动条位置)

原文地址:https://www.cnblogs.com/ytraister/p/10959867.html

时间: 2024-11-09 00:13:51

JS——事件详情(鼠标事件)的相关文章

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其

事件类型(鼠标事件)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

jQuery事件之鼠标事件

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.   (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发.        $('p').click(function(){                alert('click function is running !');              });    (2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置.一般双击事件

c#全局鼠标事件以及鼠标事件模拟

最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废,故将其分享于此. 一.全局鼠标事件,首先构建鼠标事件处理器 public delegate void MouseMovedEvent(); public delegate void MouseMDownEvent(); public delegate void MouseMUpEvent(); pu

selenium键盘事件和鼠标事件

模拟鼠标事件 1.from selenium.webdriver.common.action_chains import ActionChains 2:ActionChains(driver):用于生成模拟用户行为 3:perform():执行存储行为 表达式 说明 context_click 右击事件 double_click 双击事件 drag_and_drop 拖动 move_to_element() 鼠标停在一个元素上 click_and_hold 按下鼠标左键在一个元素上 exampl

【JS】键盘鼠标事件

一,键盘 keydown 表示按下键盘 keypress 表示按下键盘 keyup 表示键盘弹起 这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面 先后顺序: 按照 keydown keypress keyup 顺序发生 键盘按钮值: 通过event对象的which属性获取键盘的值 keydown和keyup 能获取所有按键,不能识别大小写 keypress 不能获取功能键,如F1 SHIFT等,能够识别大小写 文本取值: keydown和keypres

JS 封装事件(鼠标事件举例)

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 p{ 9 width:200px; 10 margin: 0 auto; 11 } 12 </style> 13 </head> 14 <

JS 封装事件(鼠标事件举例)-封装引入部分

function addScrollEvent(obj,handle){ //obj代表的是将来调用函数时,传递的标签 //先判断是不是火狐 var isFF = navigator.userAgent.indexOf("Firefox"); if(isFF != -1){ obj.addEventListener("DOMMouseScroll",scrollfun,false); }else{ obj.onmousewheel = scrollFun; } //

事件类型——鼠标事件

click:点击鼠标左键或者按下回车键触发.onclick事件处理程序也同样可以通过这两个方式执行. dbclick:DOM3级事件.双击鼠标左键. mousedown:单击鼠标左键. mouseup:松开单击着的鼠标左键. (click包括按下与松开鼠标左键两个步骤,mousedown仅仅是按下鼠标左键操作,mouseout是松开鼠标左键操作.因此在鼠标操作上click=mousedown+mouseup) mouseenter:鼠标光标从元素外部首次移动到元素范围之内时触发.该事件不冒泡,而

JS_DOM事件之鼠标事件之随鼠标移动

导航栏背景随鼠标移动的案例 HTML: 1 <div class="content"> 2 <nav class="navigation"> 3 <ul id="nav"> 4 <li>首页新闻</li> 5 <li>公司简介</li> 6 <li>活动策划</li> 7 <li>企业文化</li> 8 <li