首先说到这个问题我们先来谈谈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. Linux 高压缩率工具 XZ 压缩详解

    目录 一.XZ 基础信息 二.安装 三.详解 3.1.常用的参数 3.2. 常用命令 四.扩展 4.1.unxz 4.2.xzcat 4.3.lzma 4.4.unlzma 4.5.lzcat 一.X ...

  2. laravel 工厂模式到容器

    下面实现了查人拥有超能力的三种方式 第一种最基本的类引用实现 1 <?php /** * 目的:代码的完善来说明从 基础类的调用到 工厂类的使用 再到容器的出现的原因 * (首先要明白工厂类和容 ...

  3. 机器学习-NLP之Word embedding 原理及应用

    概述 自然语言是非常复杂多变的,计算机也不认识咱们的语言,那么咱们如何让咱们的计算机学习咱们的语言呢?首先肯定得对咱们的所有文字进行编码吧,那咱们很多小伙伴肯定立马就想出了这还不简单嘛,咱们的计算机不 ...

  4. hashmap 的边遍历边存储

    PS: Hashmap 的一边遍历边存储,可解决例如两数之和. 无重复最长子串问题等,代码为cpp格式. 以无重复最长子串为例. class Solution { public: int length ...

  5. javabst1an

    (单选题)下列概念中不包括任何实现,与存储空间没有任何关系的是() A)类 B)接口 C)抽象类 D)对象 正确答案为:B解析:接口是一种只含有抽象方法或常量的一种特殊的抽象类,因为接口不包括任何实现 ...

  6. 浅谈C语言的数据存储(二)

    作者:冯老师,华清远见嵌入式学院讲师. 静态区是一个抽象笼统的概念,在实际的Linux/C的可执行程序中并没有静态区这个区域,具体来讲它主要由两个段组成:.data段和.bss段.其中.data段就是 ...

  7. 简明 homebrew

    介绍 包管理工具几乎已经成为现代操作系统或者开发平台不可或缺的工具软件,无论做开发,或是管理服务器,都免不了用到一些第三方依赖包.包管理工具的基本功能就是提供一个集中的平台,可以在这里找到大部分流行的 ...

  8. POJ_2941_矩阵

    题目描述: 每组数据给定一个n*n的矩阵,选定不同行不同列的n个元素,求和,若所有选法所产生的和相等,则输出 homogeneous,否则输出not homogeneous. 描述: 数据挺大,爆搜肯 ...

  9. 《Python学习手册 第五版》 -第7章 字符串基础

    本章内容是关于字符串的,字符串是编程中经常遇到的问题,本章的内容不是包含所有字符串的讲解,而是针对其最基本的内容进行说明,后续的相关章节会根据需要进行扩展和说明,例如后续的第37章内容会讲解Unico ...

  10. YUM源部署和使用

    1.前言 为什么需要内部yum源呢,有可能是业务内部的服务器对外是不通了,居于一些安全方面的考虑.内部yum源又有什么好处呢,第一,速度快:第二,内网可控,外网有问题也不影响内网包的下载和安装等. 2 ...