老师请检查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<p id="start"></p>
<p id="mobile"></p>
<p id="end"></p>
<script>
// 获取DOM元素
const boxEL = document.getElementById("box");
const startEL = document.getElementById("start");
const mobileEL = document.getElementById("mobile");
const endEL = document.getElementById("end");
//定义函数startHandler 直接在事件处理函数中调用即可
const startHandler = e => {
// 获取event对象的属性changedTouches保存到touch
const touch = e.changedTouches[0];
// 往p标签里面填充HTML元素，获取按下时 相对于HTML文档的X、Y坐标并取整
startEL.innerHTML = `touch开始的位置: ${parseInt(
touch.pageX
)}.${parseInt(touch.pageY)}`;
};
// 往p标签里面填充HTML元素，获取移动时 相对于HTML文档的X、Y坐标并取整
const moveHandler = e => {
const touch = e.changedTouches[0];
mobileEL.innerHTML = `touch移动的位置: ${parseInt(
touch.pageX
)}.${parseInt(touch.pageY)}`;
};
// 往p标签里面填充HTML元素，获取松开时 相对于HTML文档的X、Y坐标并取整
const endHandler = e => {
const touch = e.changedTouches[0];
endEL.innerHTML = `touch结束的位置: ${parseInt(touch.pageX)}.${parseInt(
touch.pageY
)}`;
};
// 绑定事件处理函数
boxEL.addEventListener("touchstart", startHandler, false);
boxEL.addEventListener("touchmove", moveHandler, false);
boxEL.addEventListener("touchend", endHandler, false);
</script>
</body>
</html>7
收起
正在回答
2回答
同学你好，代码效果正确，很棒，祝学习愉快~
清夏_
2022-10-24 10:48:05
老师这种写法感觉不是很美观， 我想把事件处理函数写到自定义函数startHandler前面去，但是那样解析到我定义的函数startHandler的时候就会报错。有什么方法改一下吗
-
imooc_慕慕 #1
同学你好，参考如下：
boxEL.addEventListener('touchstart', (event) => { startEL.innerText = `touch开始的位置: ${parseInt(event.changedTouches[0].pageX)}.${event.changedTouches[0].pageY}`; } , false); boxEL.addEventListener('touchmove', (event) => { mobileEL.innerText = `touch移动的位置:${parseInt(event.changedTouches[0].pageX)}.${event.changedTouches[0].pageY}`; } , false); boxEL.addEventListener('touchend', (event) => { endEL.innerText = `touch结束的位置:${parseInt(event.changedTouches[0].pageX)}.${event.changedTouches[0].pageY}`; } , false);祝学习愉快~
2022-10-24 11:06:36
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星