首先说到这个问题我们先来谈谈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. LESS 用法入门

    本文旨在加深对 LESS 的理解和记忆,供自己开发时参考.相信对没有接触过 LESS 的程序员还是有用的,大佬绕路. 一. 安装和使用 LESS 1.1 安装 使用命令行安装 LESS npm ins ...

  2. 中国天气网API接口

    http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data/cityinfo/101010100.h ...

  3. Linux基础与搭建

    1 学习目标 了解Linux的简介与安装 掌握Linux常用的命令 掌握Linux系统上JDK.Mysql.Tomcat的安装 2  Linux简介 2.1 Unix简介 Unix是一个强大的多用户. ...

  4. 学习CSS之用CSS绘制一些基本图形

    一.三角形 如下图,通过设置 border 的大小和颜色可以形成四个三角形: 上图对应的代码为: /* 三角形 */ .triangle {     width: 0;     height: 0; ...

  5. Codeforces_512_B

    http://codeforces.com/problemset/problem/512/B dp题,因为状态很多,所以用map保存,注意代码中的那个二层循环不能内外换,因为map会自动排序. #in ...

  6. 一个新实验:使用gRPC-Web从浏览器调用.NET gRPC服务

    今天给大家翻译一篇由ASP.NET首席开发工程师James Newton-King前几天发表的一篇博客,文中带来了一个实验性的产品gRPC-Web.大家可以点击文末的讨论帖进行相关反馈.我会在文章末尾 ...

  7. vuejs之vue和springboot后端进行通信

    一.新建一个vue项目,建立好后的相关文件 查看一下新建好的vue项目的结构: 当前各个文件中的内容: App.vue:主入口 <template> <div id="ap ...

  8. 基于LNMP架构部署NextCloud私有云盘

    一.NextCloud 概述 云盘这个词无论是做技术出身的朋友还是普通的网民.想必已经听的非常多了.在日常生活当中我们用的最多的云盘莫过于百度网盘了 在前几年百花齐放的网盘市场.到现如今只剩下了百度网 ...

  9. CentOS7 Cloudera Manager6 完全离线安装 CDH6 集群

    本文是在CentOS7.4 下进行CDH6集群的完全离线部署.CDH5集群与CDH6集群的部署区别比较大. 说明:本文内容所有操作都是在root用户下进行的. 文件下载 首先一些安装CDH6集群的必须 ...

  10. [Effective Java 读书笔记] 第三章类和接口 第十六条

    第十六条 复合优先于继承 如果不确定B和A的关系是,is-a的关系,B确实也是A,那么久不应该使用B继承A,否则会暴露实现细节, 你的实现都会限制在原始的实现上. 书中举的第一个例子,实现了一个类ex ...