实现:兼容移动PC的鼠标点击画圈效果

102 阅读1分钟

image.png

let person = {
  wh:50,
}
Object.defineProperty(person,'fullName',{
  set (value) {
    console.log('value',value)
    this.wh = value
  }
})
let device = "mousedown"
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  device = "touchend";
}
let span = document.createElement('span');
function cElSpan(v){
  let x = v.changedTouches ? v.changedTouches[0].clientX : v.clientX
  let y = v.changedTouches ? v.changedTouches[0].clientY : v.clientY
  span.className='hoverCls '+new Date().getTime();
  span.style.width=person.wh+'px'
  span.style.height=person.wh+'px'
  span.style.left = x-person.wh/2+'px'
  span.style.top = y-person.wh/2+'px'
  document.body.appendChild(span)
}
document.addEventListener(device, function(v,event){
  cElSpan(v);
})
cElSpan({
  clientX:-50,
  clientY:-50
});
.hoverCls{
  display:inline-block;
  position: fixed;
  z-index: 1;
  top:0;
  left:0;
  border-radius: 50%;
  border:1px solid red;
}