首先说到这个问题我们先来谈谈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获取点击事件的问题的更多相关文章

  1. threejs Object的点击(鼠标)事件(获取点击事件的object)

    objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个o ...

  2. asp.net 页面上的点击事件

    asp.net 页面上 服务器端控件Button 有两个click事件如 <asp:Button ID="Button1" runat="server" ...

  3. EditText 双击才能获取点击事件

    在获取EditText点击事件的过程中,发现EditText setOnClickListener事件响应中,只有获取焦点的时候才会响应, 如当焦点在别的控件上时,只能先点击获取焦点,第二次点击才会响 ...

  4. 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定

    1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...

  5. 从获取点击事件根元素谈 target和currentTarget

    事情由来: 写了一个点击事件,想获取根元素,想的直接用current就行了,因为之前就是这么用的,但是之前的点击元素是没子元素的,current就是根元素,但是这次点击元素内部有子元素,current ...

  6. jQuery通过event获取点击事件的事件对象

    要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...

  7. jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值

    写html时这样绑定 <input type="text" name="address4" id="address4" onFocus ...

  8. swift UITapGestureRecognizer获取点击事件点击的位置point

    func picTap(sender: UITapGestureRecognizer) { let point = sender.location(in: sender.view) } 其中获取的po ...

  9. android之View坐标系(view获取自身坐标的方法和点击事件中坐标的获取)

    在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...

随机推荐

  1. CF572_Div2_F

    题意 http://codeforces.com/contest/1189/problem/F 思考 由于是子序列,答案只跟选法有关,与顺序无关,先排序. 直接计算答案比较困难.联想到期望的无穷级数计 ...

  2. 关于基本布局之——Flex布局

    Flex布局 1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上.给div这类块状元素元素设置display:flex或者给span这类内联元素设置 ...

  3. Java基础知识之设计模式--单例模式

    Java设计模式--单例模式 声明:本文根据慕课网汤小洋老师的精品课程整理来的:慕课网 什么是设计模式(Design Pattern)? 设计模式是一套被反复使用,多数人知晓的,经过分类编目的,代码设 ...

  4. 码云(gitee)配置ssh密钥

    创建公钥的目的: 使用SSH公钥可以让你在你的电脑和码云通讯的时候使用安全连接(git的remote要使用SSH地址) git中粘贴右击鼠标选择Paste 步骤: 打开终端(git)进入.ssh目录 ...

  5. Unreal Engine 4 蓝图完全学习教程(三)—— 节点的基本知识

    Ⅰ.节点的种类 ①标题:在节点的上方显示着节点的标题,标题部分会根据节点类型显示不同的颜色. ②输入:用于从其他节点接收数据以获取必要的数值. ③输出:将这个节点计算出结果用于传递数值到其他节点. ( ...

  6. python序列化对象和反序列化

    1.首先不管哪种语言都会用到序列化和反序列化的过程, 2.序列化:把对象转换为字节序列的过程称为对象的序列化:   反序列化:把对象转换为字节序列的过程称为对象的序列化. 3.序列化的作用:把对象(变 ...

  7. Affinity Propagation Demo1学习

    利用AP算法进行聚类: 首先导入需要的包: from sklearn.cluster import AffinityPropagation from sklearn import metrics fr ...

  8. HDU_1556_线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=1556 直接用了技巧来做. #include<iostream> #include<cstdio ...

  9. POJ_1363_模拟

    题目描述: 列车出入站是一种栈的机制,每组数据给予一个n,进站按1-n顺序,给定一组出站顺序,判断能否实现. 思路: 直接用了queue,in记录当前准备入站的列车编号,out记录已经出站的辆数+1. ...

  10. sql中常量和变量的引用

    String name =jtf.getText().trim(); String sql="select * from stu where stuname='  "+name+& ...