有关鼠标在页面body获取点击事件的问题
首先说到这个问题我们先来谈谈body的高度问题,关于body高度的设置。
有些小伙伴可能就会说这个是多么的简单,直接进行如下操作不就可以了
body{
height:100%; }
这个设置虽然是想法是对的,但是你发现更本就不得行,那么必须就要进行如下的操作
html,body{
height:100%; }
好了这个基本上就能解决body高度不能自适应的问题了。可能会存在一些没有自适应的问题,但是也基本不影响页面的布局。
现在我们切入正题
关于获取页面鼠标点击时的坐标,我们直接用下面的方式来操作
let body = document.getElementsByTagName("body")[0];
body.onclick = function() {
let x = event.pageX; //获取距离浏览器页面左边的X
let y = event.pageY; //获取距离浏览器页面上端的Y
}
到这里基本上就可以了,重点就只有这么一点点,获取到了x,y就可以进行对应的操作了哈
可能会出现个别的情况有些时候点击页面没有效果,不起作用。此时我们就可以把body改成html
此时你就会发现点击页面任何位置都是可以触发onclick的。
有关鼠标在页面body获取点击事件的问题的更多相关文章
- threejs Object的点击(鼠标)事件(获取点击事件的object)
objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个o ...
- asp.net 页面上的点击事件
asp.net 页面上 服务器端控件Button 有两个click事件如 <asp:Button ID="Button1" runat="server" ...
- EditText 双击才能获取点击事件
在获取EditText点击事件的过程中,发现EditText setOnClickListener事件响应中,只有获取焦点的时候才会响应, 如当焦点在别的控件上时,只能先点击获取焦点,第二次点击才会响 ...
- 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定
1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...
- 从获取点击事件根元素谈 target和currentTarget
事情由来: 写了一个点击事件,想获取根元素,想的直接用current就行了,因为之前就是这么用的,但是之前的点击元素是没子元素的,current就是根元素,但是这次点击元素内部有子元素,current ...
- jQuery通过event获取点击事件的事件对象
要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...
- jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值
写html时这样绑定 <input type="text" name="address4" id="address4" onFocus ...
- swift UITapGestureRecognizer获取点击事件点击的位置point
func picTap(sender: UITapGestureRecognizer) { let point = sender.location(in: sender.view) } 其中获取的po ...
- android之View坐标系(view获取自身坐标的方法和点击事件中坐标的获取)
在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...
随机推荐
- pycharm 固定模板使用者和日期
如上图修改就可以正常修改模板了修改后每创建一个python文件就会是这种效果
- web语义化这个坑
什么是wen语义化:https://www.zhihu.com/question/20455165 标签大全:http://www.w3school.com.cn/tags/tag_html.asp ...
- LinearLayout中组件右对齐
在LinearLayout中,如果将其定位方向设为横向排列:android:orientation="horizontal",那么这个布局中的控件将自左向右排列. 但有时会有这样的 ...
- MySQL学习笔记——基础与进阶篇
目录 一.###MySQL登录和退出 二.###MySQL常用命令 三.###MySQL语法规范 四.###基础查询 五.###条件查询 六.###排序查询 七.###常见函数的学习 八.###分组查 ...
- num07---工厂方法模式
一.简单工厂模式 [之所以叫简单,说明没有完全做到 设计模式的要求] 前言:活字印刷术,面向对象思想 复用 维护 扩展 灵活 高内聚低耦合 以 实现 一个计算器 为例: 1.创建 抽象类count, ...
- 2020牛客寒假算法基础集训营4 -- A : 欧几里得
A:欧几里得 考察点 : 递推, gcd 坑点 : long long 这道题题解说的十分详细,是裴波那契的一种变形,只不过换成 gcd 了. Code: #include <cstdio> ...
- c++中的智能指针怎样释放连续的资源?
以前学智能指针时有点想当然了,一直以为智能指针很智能,不管你让它管理的是单个资源还是连续的资源它都能正确的将资源释放,现在发现自己大错特错. 先看代码: #include <iostream&g ...
- Window10和Ubuntu 18.04双系统安装的引导问题解决
作为码农 首先,建议了解下grub2的启动顺序和逻辑.可以参考这篇文章,grub.cfg详解. 从执行顺序倒推,如下如果全部执行成功,则会进入grub的启动菜单:如果最后一步,没有找到grub.cfg ...
- 题解P1104生日
\(\color{blue}{P1104 生日(题目传送门)}\) 这道题的大意是:给出n个人的出生日期,让我们按年龄(就是先比年份,再比月份和日期,这是常识好吧)大小来排序,如果相同则按输入顺序排序 ...
- mysql添加远程权限
mysql -u root -p grant all privileges on *.* to root@'%' identified by "password"; flush p ...