e.touches[0].pageY

`e.touches[0].pageY` 是一个 JavaScript 中的触摸事件对象的属性。

在触摸事件中，`e.touches` 是一个触摸点的数组，每个触摸点包含了多个属性，其中 `pageY` 表示触摸点相对于页面顶部的垂直位置。

通过 `e.touches[0].pageY` 可以获取第一个触摸点的垂直位置。

相关问题

touchmove(e) { console.log(this.$refs.dragToBox.$el,this.dom,'==',this.$refs.dragToBox.$el.offsetTop) if (this.canDrag && this.dom) { let picDom = this.$refs.dragPic.$el let picTop = picDom.offsetTop let picHeight = picDom.offsetHeight let picLeft = picDom.offsetLeft let picWidth = picDom.offsetWidth console.log('picDom:'+picDom,'picTop:'+picTop,'picHeight:'+picHeight,'picLeft:'+picLeft,'picWidth:'+picWidth) let boxDom = this.$refs.dragToBox.$el let boxHeight = boxDom.offsetHeight let boxWidth = boxDom.offsetWidth let boxTop = boxDom.offsetTop let boxLeft = boxDom.offsetLeft console.log('boxDom:'+boxDom,'boxHeight:'+boxHeight,'boxWidth:'+boxWidth,'boxTop:'+boxTop,'boxLeft:'+boxLeft) let to = this.dom let toH = to.offsetHeight let toW = to.offsetWidth let toPageH = e.touches[0].pageY - toH / 2 - boxTop let toPageW = e.touches[0].pageX - toW / 2 - boxLeft console.log('to:'+to,'toH:'+toH,'toW:'+toW,'toPageH:'+toPageH,'toPageW:'+toPageW) if(!this.el.enterPic && (picHeight + picTop - 38) > toPageH) { this.el.enterPic = true } if (!this.item.child[this.index + 1]) { this.item.child[this.index + 1] = { isMove: false, enterPic: false, left: 0, top: 0 } this.sqArr = Object.assign([], this.sqArr) } this.el.isMove = true if (toPageH >= 0 && ((this.el.enterPic && toPageH <= picHeight) || (!this.el.enterPic)) && toPageH <= window.innerHeight - toH) { this.el.top = `${((toPageH * 100) / boxHeight)}%` // this.el.top = toPageH + 'px' } if (toPageW >= picLeft && toPageW <= (picLeft + picWidth-toH) && toPageW <= window.innerWidth - toW) { // this.el.left = toPageW + 'px' this.el.left = `${(toPageW * 100) / boxWidth}%` } } },

这段代码是一个 `touchmove` 事件的处理函数。在移动触摸过程中，根据触摸点的位置和元素的尺寸，计算并更新元素的位置。

首先，获取了一些元素的引用和尺寸信息，比如 `picDom` 表示一个名为 `dragPic` 的元素，`boxDom` 表示一个名为 `dragToBox` 的元素。

然后，根据触摸点的位置和元素的尺寸，计算了一些值，如 `toPageH` 表示触摸点相对于某个元素的垂直位置，`toPageW` 表示触摸点相对于某个元素的水平位置。

根据这些计算出来的值，更新了元素的位置信息，如 `this.el.top` 和 `this.el.left` 分别表示元素的垂直和水平位置。

最后，根据一些条件判断，更新了一些状态变量，如 `this.el.isMove` 表示元素是否正在移动，`this.el.enterPic` 表示元素是否进入了特定条件下。

整个代码逻辑是基于触摸点位置和元素尺寸的计算和判断，实现了元素的拖拽效果。

JavaScript 在使用了e.preventDefault(); 如何让移动端浏览器可以正常上下滑动

当使用了 e.preventDefault() 后，禁止了默认的滑动事件。如果想要在移动端浏览器中正常上下滑动，可以使用 touchstart 和 touchmove 事件来模拟滑动事件，并改变元素的 scrollTop 属性。具体的代码实现可以类似这样：

var ele = document.getElementById('app');
var startY = 0;
var moveY = 0;
var deltaY = 0;

ele.addEventListener('touchstart', function(e) {
  startY = e.touches[0].pageY;
  moveY = 0;
  deltaY = 0;
});

ele.addEventListener('touchmove', function(e) {
  moveY = e.touches[0].pageY;
  deltaY = moveY - startY;

  // 如果滚动到了容器的顶部，并且向下滑动，就让浏览器滚动
  if (ele.scrollTop === 0 && deltaY > 0) {
    e.preventDefault();
  }

  // 如果滚动到了容器的底部，并且向上滑动，也让浏览器滚动
  if (ele.scrollTop === ele.scrollHeight - ele.offsetHeight && deltaY < 0) {
    e.preventDefault();
  }

  ele.scrollTop -= deltaY;
});

这段代码监听了 touchstart 和 touchmove 事件来模拟滑动。当向上滑动的时候，元素的 scrollTop 属性减去 deltaY，从而模拟向上滑动的效果。当滑到容器的顶部或者底部的时候，就让浏览器处理滑动事件。这样就可以让移动端浏览器正常上下滑动了。