mouseEvent...

by Mike Lin

HTML

<span class="test1">
这是测试MouseEvent,这是测试MouseEvent,这是测试MouseEvent
</span>

<div class="result">
<p>
测试结果如下：
</p>
<p class="rs">

</p>
</div>

CSS

.test1{
  padding: 1px;
  margin: 1px;
  border: 2px solid #000;
  overflow: auto;
  height: 200px;
}

JavaScript

const test1 = document.querySelector('.test1')

const rs = document.querySelector('.rs')

test1.addEventListener('mousedown', (e) => {
	rs.innerHTML =`鼠标点击的位置信息：
  button:${e.button}
  clientX: ${e.clientX}
  clientY: ${e.clientY}
  offsetX: ${e.offsetX}
  offsetY: ${e.offsetY}
  pageX: ${e.pageX}
  pageY: ${e.pageY}
  screenX:  ${e.screenX}
  screenY: ${e.screenY}
  `
})

test1.addEventListener('touchstart', (e) => {
	rs.innerHTML =`触摸点的位置信息：
  clientX: ${e.touches[0].clientX}
  clientY: ${e.touches[0].clientY}
  offsetX: ${e.touches[0].offsetX}
  offsetY: ${e.touches[0].offsetY}
  pageX: ${e.touches[0].pageX}
  pageY: ${e.touches[0].pageY}
  screenX:  ${e.touches[0].screenX}
  screenY: ${e.touches[0].screenY}
  `
})