目录
四、touchcancel：当触摸事件被取消时触发，例如突然有来电等中断触摸的情况。
JavaScript触摸事件是通过浏览器提供的Touch API来实现的。当用户在触摸屏设备上进行交互时，浏览器会捕捉到触摸事件，并将其传递给相应的JavaScript事件处理器。
需要注意的是，触摸事件在不同的设备和浏览器上可能有差异，因此在使用触摸事件时应该进行兼容性测试，并根据需要进行适当的兼容性处理。此外，触摸事件通常与其他事件（如点击事件、滚动事件等）结合使用，以实现更复杂的交互效果。
touchstart事件在用户触摸屏幕时触发，可以用于实现各种触摸交互效果。以下是一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>触摸事件示例</title>
<style>
#touchDiv {
width: 200px;
height: 200px;
background-color: green;
color: white;
text-align: center;
line-height: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="touchDiv">点击触摸</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const touchDiv = document.getElementById('touchDiv');
touchDiv.addEventListener('touchstart', function(event) {
// 当用户触摸元素时，更改其背景颜色和文本内容
touchDiv.style.backgroundColor = 'red';
touchDiv.textContent = '已触摸';
});
});
</script>
</body>
</html>
在这个示例中，我们有一个HTML文档，其中包含一个id为touchDiv的<div>元素。CSS样式定义了元素的外观。JavaScript代码直接嵌入在HTML文件中，在DOMContentLoaded事件中添加了一个touchstart事件监听器。当用户触摸touchDiv元素时，触发事件处理函数，将元素的背景颜色更改为红色，并更新文本内容为"已触摸"。
将HTML代码保存为HTML文件（例如index.html），然后在Web浏览器中打开该文件。您应该看到一个具有绿色背景的"点击触摸"元素。当您触摸它时，元素的外观将根据事件处理函数中指定的更改而改变。
当触摸设备上的手指在屏幕上移动时，会触发touchmove事件。这个事件常用于实现触摸滑动、拖拽等交互效果。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>触摸移动事件示例</title>
<style>
#touchDiv {
width: 200px;
height: 200px;
background-color: green;
color: white;
text-align: center;
line-height: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="touchDiv">触摸并移动</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const touchDiv = document.getElementById('touchDiv');
touchDiv.addEventListener('touchmove', function(event) {
// 阻止默认的滚动行为
event.preventDefault();
// 获取触摸点的坐标
const touch = event.touches[0];
const x = touch.clientX;
const y = touch.clientY;
// 将触摸点的坐标显示在元素上
touchDiv.textContent = `坐标：(${x}, ${y})`;
});
});
</script>
</body>
</html>
在这个例子中，我们创建了一个带有id为touchDiv的<div>元素，通过CSS样式设置了其外观。在JavaScript中，我们在DOMContentLoaded事件中添加了一个touchmove事件的监听器。
当用户在touchDiv元素上触摸并移动手指时，touchmove事件被触发。事件处理函数首先使用event.preventDefault()阻止默认的滚动行为。然后，通过event.touches属性获取第一个触摸点的坐标。将x和y坐标提取出来，并将其显示在touchDiv元素的文本内容中。
touchend事件在触摸设备上的手指离开屏幕时触发。它通常用于捕捉用户完成触摸操作的时机，例如触摸按钮、滑动结束等。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>触摸结束事件示例</title>
<style>
#touchDiv {
width: 200px;
height: 200px;
background-color: green;
color: white;
text-align: center;
line-height: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="touchDiv">触摸并松开</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const touchDiv = document.getElementById('touchDiv');
touchDiv.addEventListener('touchend', function(event) {
// 更改元素的背景颜色
touchDiv.style.backgroundColor = 'red';
// 修改文本内容
touchDiv.textContent = '触摸结束';
});
});
</script>
</body>
</html>
在这个例子中，我们创建了一个带有id为touchDiv的<div>元素，通过CSS样式设置了其外观。在JavaScript中，我们在DOMContentLoaded事件中添加了一个touchend事件的监听器。
当用户在touchDiv元素上触摸并松开手指时，touchend事件被触发。事件处理函数中，我们将touchDiv元素的背景颜色改为红色，并将文本内容修改为"触摸结束"。
touchcancel事件在触摸设备上触发的情况下，触摸被取消时会被触发。它通常用于处理触摸操作被中断或取消的情况，例如触摸事件发生期间设备发生旋转、触摸设备被其他操作所占用等情况。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>触摸取消事件示例</title>
<style>
#touchDiv {
width: 200px;
height: 200px;
background-color: green;
color: white;
text-align: center;
line-height: 200px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="touchDiv">触摸并取消</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const touchDiv = document.getElementById('touchDiv');
touchDiv.addEventListener('touchcancel', function(event) {
// 更改元素的背景颜色
touchDiv.style.backgroundColor = 'blue';
// 修改文本内容
touchDiv.textContent = '触摸已取消';
});
});
</script>
</body>
</html>
在这个例子中，我们创建了一个带有id为touchDiv的<div>元素，通过CSS样式设置了其外观。在JavaScript中，我们在DOMContentLoaded事件中添加了一个touchcancel事件的监听器。
当用户在touchDiv元素上触摸事件发生期间，如果触摸被取消，touchcancel事件将被触发。事件处理函数中，我们将touchDiv元素的背景颜色改为蓝色，并将文本内容修改为"触摸已取消"。
touchenter在触摸事件中表示手指触摸元素时进入元素的区域时触发，以下是一个简单的例子
<!DOCTYPE html>
<html>
<head>
<title>Touch Enter Event Example</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('touchenter', function(event) {
box.style.backgroundColor = 'red';
});
box.addEventListener('touchleave', function(event) {
box.style.backgroundColor = '#ccc';
});
</script>
</body>
</html>
在这个例子中，当手指触摸 id 为 box 的 <div> 元素时，会触发 touchenter 事件，将 <div> 元素的背景颜色设置为红色。当手指离开元素时，会触发 touchleave 事件，将背景颜色恢复为灰色。
touchleave 是一个事件，用于在触摸设备上检测手指离开元素的情况。它通常与其他触摸事件一起使用，如 touchstart、touchmove 和 touchend。当手指在元素上按下后移出元素时，touchleave 事件将被触发。
下面是一个简单的例子，演示了如何使用 touchleave 事件：
<!DOCTYPE html>
<html>
<head>
<title>Touch Leave Event Example</title>
<style>
#target {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var targetElement = document.getElementById('target');
targetElement.addEventListener('touchleave', function(event) {
console.log('Finger left the target element.');
// 在这里可以执行其他操作或触发其他事件
});
});
</script>
</head>
<body>
<div id="target"></div>
</body>
</html>
在上述例子中，我们创建了一个具有黄色背景的 <div> 元素作为目标元素。当手指按下目标元素并移动到元素外部时，控制台将输出 "Finger left the target element." 的消息。您可以根据需要在事件处理程序中执行其他操作或触发其他事件。
请注意，touchleave 事件只在手指离开元素时触发，不会在手指在元素内部移动时触发。