js如何判断touchmove移出当前元素
发布网友
发布时间：2022-04-28 17:15
共1个回答
热心网友
时间：2022-04-20 03:59
只要能判断出鼠标移入移出时属于哪个部分的范围内，问题即可解决。而这个判断可通过斜率，结合鼠标的位置与元素框中心点的位置比较得出。这个判断原理，采用下面的坐标系图解来说明。
解决这个问题，建立如下图坐标系：
1）上图以浏览器可视区域左上角为原点建立坐标系，坐标系与数学坐标系方向一致，往右表示x轴正方向，往下表示y轴负方向；
2）图中点(x1,y1)代表元素框左上角，(x4,y4)代表元素框右下角，(x0,y0)代表元素框的中心点，（x,y）表示鼠标移入移出时与元素框的边的交点；
3）根据下面的公式：
可得(x1,y1)与（x4,y4)这条对角线的斜率为 k = (y1-y4)/(x1-x4)。由于对称性，元素框另外一条对角线的斜率一定是 -k。
同时由于(x1,y1)与（x4,y4)这条对角线在坐标系中一定经过的是第二和第四象限，所以k肯定是负值，而 -k一定是正值。
4）根据同样的公式，当鼠标移入移出时的瞬间，与元素边框的交点与元素框中心点的斜率 k1 = (y-y0)/(x-x0)。
5）由图可知，当 k < k1 < _k时，鼠标一定是从元素的左右方向移动的；反之，一定是从上下方向移动的。
当鼠标是从左右方向移动时，如果x > x0，那么鼠标就是从右边移动的，反之就是从左边移动的；
当鼠标是从上下方向移动时，如果y > y0时，那么鼠标就是从上边移动的，反之就是从下边移动的。
** 注意：坐标系中所有的y值都是负的。
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。
iOS版 Safari为了向开发人员传达一些特殊信息，新增了一些专有事件。因为 iOS设备既没有鼠标 也没有键盘，所以在为移动 Safari开发交互性网页时，常规的鼠标和键盘事件根本不够用。随着 Android 中的 WebKit 的加入，很多这样的专有事件变成了事实标准，导致 W3C开始制定 Touch Events规范（参 见 https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html）。以下介绍的事件只针对触摸设备。
触摸事件包含 iOS 2.0软件的 iPhone 3G发布时，也包含了一个新版本的 Safari浏览器。这款新的移动 Safari 提供了一些与触摸（touch）操作相关的新事件。后来，Android上的浏览器也实现了相同的事件。触摸 事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说，有以下几个触 摸事件。
touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。
touchend：当手指从屏幕上移开时触发。
touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。
上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在 DOM规范中定义，但它们却 是以兼容 DOM的方式实现的。因此，每个触摸事件的 event 对象都提供了在鼠标事件中常见的属性： bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey。
除了常见的 DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的 Touch 对象的数组。
targetTouchs：特定于事件目标的 Touch 对象的数组。
