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