JavaScript中的点击效果

点击鼠标，让div出现在鼠标点击的位置上
实现方式：点击时获取鼠标点击位置的坐标，是针对视窗窗口的坐标。 将这个数值作为标签定位的数据

事件对象.offsetX 事件对象.offsetY
点击时距离边框线内标签左上角坐标

事件对象.clientX 事件对象.clientY
点击时距离视窗窗口左上角坐标

事件对象.pageX 事件对象.PageY
点击时距离页面左上角坐标

如果页面没有滚动，页面的左上角和视窗窗口的左上角重合，两个数值是一样的
如果页面滚动，页面的左上角不再与视窗窗口的左上角重合，两个数值是不同的

        var oDiv = document.querySelector('div');
        // 如果没有padding和border，只要获取宽度就可以。有px单位，parseInt() 只获取数值，不要px
        // 实际项目中还需要定义兼容性var oDivHeight1 = parseInt(window.getComputedStyle(oDiv).height) ;
        // 如果要有是有padding和border，需要使用 offsetHeight 来获取。只有数值,没有px单位
        var oDivHeight2 = oDiv.offsetHeight;
        var oDivWidth = oDiv.offsetWidth;
        window.onclick = function(e){
        oDiv.style.left = e.clientX - oDiv.offsetWidth/2  + 'px' ;
        oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
        }

// 让标签的左上角和鼠标点击的位置重合
oDiv.style.left = e.clientX + 'px' ;
oDiv.style.top = e.clientY + 'px' ;

// 让标签的左上角和鼠标点击位置有间距，在原始数值的基础上再多加上一定的数值
oDiv.style.left = e.clientX + 20 + 'px' ;
oDiv.style.top = e.clientY + 20 + 'px' ;

// 让标签的中心和鼠标点击位置重合，在原始数值的基础上再减去定位标签宽高的一半
oDiv.style.left = e.clientX - oDiv.offsetWidth/2  + 'px' ;
oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;