有关鼠标在页面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的。

原文地址:https://www.cnblogs.com/dy105525/p/12309285.html

时间: 2024-08-06 03:48:12

有关鼠标在页面body获取点击事件的问题的相关文章

EditText 双击才能获取点击事件

在获取EditText点击事件的过程中,发现EditText setOnClickListener事件响应中,只有获取焦点的时候才会响应, 如当焦点在别的控件上时,只能先点击获取焦点,第二次点击才会响应,解决办法改用setOnTouchListener监听, android.view.View下的OnTouchListener接口是只要触摸(touch)状态改变,就会触发该事件. 代码如下: woman_SDloadText.setOnTouchListener(new View.OnTouch

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

事情由来: 写了一个点击事件,想获取根元素,想的直接用current就行了,因为之前就是这么用的,但是之前的点击元素是没子元素的,current就是根元素,但是这次点击元素内部有子元素,current就是点击到的元素,点击子元素,获取的就是子元素,但是需求是无论点击元素哪里,都要获取到根元素,找了资料发现了 current 和currentTarget. 看代码: <!DOCTYPE html> <html> <head> <title></title

AutoCAD中获取鼠标右键点击事件(根据明经论坛ahlzl文章改写)

using Autodesk.AutoCAD.ApplicationServices; using Autodesk.AutoCAD.Runtime; [assembly:CommandClass(typeof(TestRunCommand.Class1))] namespace TestRunCommand { public class Class1 { const int WM_RBUTTONDOWN = 516; [CommandMethod("TestRunCommand")]

使listview下的控件获取点击事件,android:descendantFocusability用法简析

开发中很常见的一个问题,项目中的listview不仅仅是简单的文字,常常需要自己定义listview,自己的Adapter去继承BaseAdapter,在adapter中按照需求进行编写,问题就出现了,可能会发生点击每一个item的时候没有反应,无法获取的焦点.原因多半是由于在你自己定义的Item中存在诸如ImageButton,Button,CheckBox等子控件(也可以说是Button或者Checkable的子类控件),此时这些子控件会将焦点获取到,所以常常当点击item时变化的是子控件,

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

在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身坐标:getLeft(),getTop(),getRight(),getBottom() view获取自身宽高:getHeight(),getWidth() motionEvent获取坐标:getX(),getY(),getRawX(),getRawY() 首先是view的几个方法, 获取自身的宽高

Echatrs柱状图的点击事件

最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所以查找资料的过程也是相当曲折的,所以还是自己就遇到的问题总结一下吧. 点击柱状图跳转页面的功能: 找到你的生成Option事件的方法,在其下面添加以下代码.             var chart = ec.init(document.getElementById(id));          

popupwindow放置listview,并且使listview可以响应点击事件

最近在模仿微信的选择头像的功能,就是一个Popwindow里面是一个ListView,ListView是所有相册,用户点击里面的相册,那么那个相片展示的页面就会显示你选择的相册的相片 .刚开始发现里面的ListView不能获取点击事件,插入如下代码解决 popWinPlaylist.setFocusable(true); popWinPlaylist.update(); 随后发现popwindown以外的地方不能响应点击事件,其实你可以通过pw(PopupWindow对象).getContext

Android EditText中插入图片并响应点击事件

EditText中插入图片基本就是两种方法: 1,通过Html.fromHtml(..)来实现 [mw_shl_code=java,true]eText.append(Html.fromHtml("<img src='" + R.drawable.ohoh + "'/>", imageGetter, null));[/mw_shl_code] 2,通过ImageSpan与SpannableString/SpannableStringBuilder. [m

分析js操作动态获取屏高并触发按钮点击事件回到页面窗口的顶部

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回到顶部</title> <style> .d1{ width:100%; height:5000px; } #btn{ width:100px; height:40px; position:fixed; right:0; bottom:0; dis