JavaScript获取鼠标及元素在页面上的位置

1、clientX/Y属性

获取鼠标在页面的位置

<div class="attr-item" [class.active]="isActiveVal(i,j)" (click)="chooseVal(i,j,$event)"><span>{
  {value}}</span>

chooseVal(i,index,e){
    console.log(e.clientX);
    console.log(e.clientY);

    this.attrIndex.x = i;
    this.attrIndex.y = index;
  }

代码解析：

1. 从代码中可以看出，clientX/Y属性是事件对象（e）里面的一个属性；

2. clientX/Y属性获取的鼠标位置是相对于浏览器可视区域的左上角的距离。咱们都知道浏览器的可视区域位置是固定的不发生滚动的，所以，clientX/Y属性获取的鼠标位置不会随页面滚动而改变；

3. 兼容性：所有浏览器都能支持。

可以简单的对clientX/Y属性进行概括，它所获取的鼠标位置参考的原点就是浏览器可视区域的左上角。就是这一点，导致我们使用起来灵活性不高，不是所有页面交互效果用到的鼠标位置都是参考浏览器可视区域的左上角，有可能是参考自身元素的左上角.