JS——事件详情(鼠标事件:clientX、clientY的用法)
鼠标位置
》可视区位置: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(获取滚动条位置)】
JS——事件详情(鼠标事件:clientX、clientY的用法)的更多相关文章
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- JAVA之旅(三十一)——JAVA的图形化界面,GUI布局,Frame,GUI事件监听机制,Action事件,鼠标事件
JAVA之旅(三十一)--JAVA的图形化界面,GUI布局,Frame,GUI事件监听机制,Action事件,鼠标事件 有段时间没有更新JAVA了,我们今天来说一下JAVA中的图形化界面,也就是GUI ...
- Unity3D笔记十六 输入输出-键盘事件、鼠标事件
输入与控制操作Unity为开发者提供了Input类库,其中包括键盘事件.鼠标事件和触摸事件等一切跨平台所需要的控制事件. 一.键盘事件 1.按下事件 Input.GetKeyDown():如果按键被按 ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
示例代码: HTML文件: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- jQuery-3.事件篇---鼠标事件
jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...
- JQuery事件之鼠标事件
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. ():click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').click(function( ...
- c#全局鼠标事件以及鼠标事件模拟
最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...
- C# GridView 给某行或某列绑定点击事件和鼠标事件
protected void GridViewEx1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType = ...
- pyqt5事件与鼠标事件
一,每个事件都被封装成相应的类: pyqt中,每个事件类型都被封装成相应的事件类,如鼠标事件为QMouseEvent,键盘事件为QKeyEvent等.而它们的基类是QEvent. 二,基类QEvent ...
随机推荐
- PHP 之文件锁解决并发问题
一.参数说明 $handle: 文件资源 $operation: 锁的类型 LOCK_SH: 共享锁 LOCK_EX: 排他锁 LOCK_UN: 释放锁 $wouldblock: 设置为true的时候 ...
- std::vector遍历
std::vector是我在标准库中实用最频繁的容器.总结一下在遍历和创建vector时需要注意的一些地方. 在不考虑线程安全问题的前提下,在C++11中有五种遍历方式. 方式一 for (size_ ...
- Linux 开启443端口
1 在Linux终端输入指令: iptables -I INPUT -p tcp --dport 443 -j ACCEPT 2 回车之后继续输入指令,输入保存防火墙配置指令: service ...
- Django - orm字段类型介绍
1.根据类自动创建数据库表 #app.py下的models.py python manage.py makemigrations python manage.py migrate 执行完上述命令后,自 ...
- 【特 性】Attribute
1 AttributeUsage [AttributeUsageAttribute(AttributeTargets.All, AllowMultiple = true, Inherited = tr ...
- python利用7z批量解压rar
一开始我使用了rarfile这个库,奈何对于含有密码的压缩包支持不好,在linux上不抛出异常:之后有又尝试了unrar..比rarfile还费劲.. 所以用了调用系统命令的方法,用7z来解压 通过a ...
- copy contents of file with variable number in Matlab
input : transient.case output: transient_1.case, transient_2.case, transient_3.case ... ************ ...
- jquery源码分析(五)——Deferred 延迟对象
javascript的异步编程 为什么要使用异步编程? JS是单线程语言,就简单性而言,把每一件事情(包括GUI事件和渲染)都放在一个线程里来处理是一个很好的程序模型,因为这样就无需再考虑线程同步这些 ...
- 初识Scrapy——1—scrapy简单学习,伯乐在线实战、json数据保存
Scrapy——1 目录 什么是Scrapy框架? Scrapy的安装 Scrapy的运行流程 Scrapy的使用 实战:伯乐在线案例(json文件保存) 什么是Scrapy框架? Scrapy是用纯 ...
- HDU 1836 畅通工程
畅通工程 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 18636 ...