addEventListener和ontouchmove
时间: 2024-03-15 15:40:43 浏览: 21
addEventListener是JavaScript中用于给元素添加事件监听器的方法。它可以用来监听各种事件,比如点击、鼠标移动、键盘按下等等。通过addEventListener方法,我们可以为元素添加多个事件监听器,以便在事件触发时执行相应的操作。
ontouchmove是一个触摸事件,在移动设备上使用。它是在用户触摸屏幕并移动手指时触发的事件。通过设置ontouchmove事件监听器,我们可以在用户滑动屏幕时执行相应的操作,比如实现滑动效果、拖拽功能等。
相关问题
js中事件有哪些(请写出5种以上)
JavaScript中的事件有很多种,以下列举了5种以上常见的事件:
1. 点击事件:当用户单击元素时触发,可以使用addEventListener()方法或直接在HTML标签中使用onclick属性绑定。
2. 鼠标移入/移出事件:当鼠标移入或移出元素时触发,可以使用addEventListener()方法或直接在HTML标签中使用onmouseover和onmouseout属性绑定。
3. 键盘事件:当用户按下或松开键盘上的键时触发,常用的键盘事件有keyup、keydown和keypress事件,可以使用addEventListener()方法或直接在HTML标签中使用onkeyup、onkeydown和onkeypress属性绑定。
4. 页面加载事件:当页面加载完毕时触发,可以使用addEventListener()方法或直接在HTML标签中使用onload属性绑定。
5. 表单事件:当用户提交表单或输入框中的内容发生改变时触发,常用的表单事件有submit、reset、change和input事件,可以使用addEventListener()方法或直接在HTML标签中使用onsubmit、onreset、onchange和oninput属性绑定。
6. 拖放事件:当用户拖动元素时触发,常用的拖放事件有dragstart、dragend、dragover和drop事件,可以使用addEventListener()方法或直接在HTML标签中使用ondragstart、ondragend、ondragover和ondrop属性绑定。
7. 触摸事件:当用户在触摸屏上进行操作时触发,常用的触摸事件有touchstart、touchmove和touchend事件,可以使用addEventListener()方法或直接在HTML标签中使用ontouchstart、ontouchmove和ontouchend属性绑定。
写一个前端的左右滑动页面
可以使用CSS3的`transform: translateX()`属性来实现左右滑动页面的效果。具体实现步骤如下:
1. HTML结构:需要一个包含所有页面的父元素和多个子元素作为每一页。
```html
<div class="slider">
<div class="page page1">Page 1</div>
<div class="page page2">Page 2</div>
<div class="page page3">Page 3</div>
</div>
```
2. CSS样式:设置每个页面的宽度和高度,并将所有页面的父元素设置为横向排列,隐藏超出父元素宽度的部分。
```css
.slider {
width: 100%;
height: 500px;
overflow: hidden;
display: flex;
}
.page {
width: 100%;
height: 100%;
flex-shrink: 0;
text-align: center;
}
.page1 {
background-color: red;
}
.page2 {
background-color: green;
}
.page3 {
background-color: blue;
}
```
3. JavaScript代码:监听用户滑动手势并将页面滑动到相应位置。
```javascript
const slider = document.querySelector('.slider');
let isDragging = false;
let startPosition = 0;
let currentTranslate = 0;
let previousTranslate = 0;
function onTouchStart(event) {
if (event.type === 'mousedown') {
startPosition = event.pageX;
} else {
startPosition = event.touches[0].pageX;
}
isDragging = true;
slider.classList.add('grabbing');
}
function onTouchMove(event) {
if (isDragging) {
const currentPosition = event.type === 'mousemove' ? event.pageX : event.touches[0].pageX;
currentTranslate = previousTranslate + currentPosition - startPosition;
}
}
function onTouchEnd() {
isDragging = false;
slider.classList.remove('grabbing');
previousTranslate = currentTranslate;
}
slider.addEventListener('mousedown', onTouchStart);
slider.addEventListener('mousemove', onTouchMove);
slider.addEventListener('mouseup', onTouchEnd);
slider.addEventListener('touchstart', onTouchStart);
slider.addEventListener('touchmove', onTouchMove);
slider.addEventListener('touchend', onTouchEnd);
```
4. 实现滑动效果:根据用户手势滑动的距离来调整页面的位置。
```javascript
function updateSliderPosition() {
slider.style.transform = `translateX(${currentTranslate}px)`;
}
function animateSlider() {
requestAnimationFrame(animateSlider);
updateSliderPosition();
}
animateSlider();
```
完整的代码如下所示:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slider</title>
<style>
.slider {
width: 100%;
height: 500px;
overflow: hidden;
display: flex;
}
.page {
width: 100%;
height: 100%;
flex-shrink: 0;
text-align: center;
}
.page1 {
background-color: red;
}
.page2 {
background-color: green;
}
.page3 {
background-color: blue;
}
.slider.grabbing {
cursor: grabbing;
cursor: -webkit-grabbing;
}
</style>
</head>
<body>
<div class="slider">
<div class="page page1">Page 1</div>
<div class="page page2">Page 2</div>
<div class="page page3">Page 3</div>
</div>
<script>
const slider = document.querySelector('.slider');
let isDragging = false;
let startPosition = 0;
let currentTranslate = 0;
let previousTranslate = 0;
function onTouchStart(event) {
if (event.type === 'mousedown') {
startPosition = event.pageX;
} else {
startPosition = event.touches[0].pageX;
}
isDragging = true;
slider.classList.add('grabbing');
}
function onTouchMove(event) {
if (isDragging) {
const currentPosition = event.type === 'mousemove' ? event.pageX : event.touches[0].pageX;
currentTranslate = previousTranslate + currentPosition - startPosition;
}
}
function onTouchEnd() {
isDragging = false;
slider.classList.remove('grabbing');
previousTranslate = currentTranslate;
}
function updateSliderPosition() {
slider.style.transform = `translateX(${currentTranslate}px)`;
}
function animateSlider() {
requestAnimationFrame(animateSlider);
updateSliderPosition();
}
slider.addEventListener('mousedown', onTouchStart);
slider.addEventListener('mousemove', onTouchMove);
slider.addEventListener('mouseup', onTouchEnd);
slider.addEventListener('touchstart', onTouchStart);
slider.addEventListener('touchmove', onTouchMove);
slider.addEventListener('touchend', onTouchEnd);
animateSlider();
</script>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)