移動端-移動端イベント
14428 ワード
移動先イベントモバイル端末イベント イベントタイプ touchに対応するイベントオブジェクト タッチ位置 ios手作業事件(両指トリガ) Androidは、イベントパッケージ を指します.ケース---スライド画像 移動先イベント
イベントの種類 に入る. touch対応のイベントオブジェクト 位置をタッチ ios手労事件(両指トリガ) アンドロイドとは、事件のパッケージを指すことが多い.
イベントパッケージの参考
実例—スライド画像
イベントの種類
touchstart:タッチスクリーンにタッチ開始(タッチスクリーンに置くことを指す)touchmove:ドラッグ(タッチスクリーン上を指で移動)touchend:接続状に触れる(タッチスクリーンから指を離す)touchenter:移動指がdom要素touchleave:移動する指はdom要素を高く開く.touchcancelは、ドラッグ中断時にトリガされる.touches:現在追跡されているタッチ操作を示すタッチオブジェクトの属性targetTouches;特定のイベントのターゲットを示すタッチオブジェクトの配列.changeTouches:前回のタッチ以来、変更されたtouchオブジェクトの配列を示す.clientxおよびclienty属性:視認口に対する座標:identifier:タッチの一意idを識別する.pagexおよびpageY:ページに対する座標:screenXおよびscreenY:スクリーンに対する座標:radiusxおよびradiusY:ユーザとタッチプレーンの接触面を囲む最小楕円形の水平軸(X軸)半径と重直軸(Y軸)半径:rotationAngle:この属性はTouch.radiusx、Touch.radiusyとともに、ユーザとタッチパネルの接触面を説明している.force:このTouchオブジェクトに対応する指を返してタッチパネルの圧力の大きさを押して、0.0(圧力なし)から1.0(最大圧力)までの浮動小数点数を返します.target:タッチされたDOHノードターゲット.gesturestart:指がスクリーンに押した時、もう一方の指がスクリーンに触れた時にトリガします.touch startのような役割をしています.gesturechange:タッチパネルのいずれかの指の位置が変化したときにトリガされる.gestureend;画面の上から指を離すとトリガします.イベントパッケージの参考
実例—スライド画像
<html>
<head>
<meta charset="utf-8">
<title>title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
* {
margin: 0;padding: 0;
}
body {padding: 50px;}
.outer {
height: 384px;
width: 300px;
border: 1px solid red;
overflow: hidden;
}
style>
head>
<body>
<div class="outer">
<img src="./pic.jpg" alt="" class="inner">
div>
body>
<script type="text/javascript">
var _outer = document.querySelector(".outer");
var _inner = document.querySelector(".inner");
// dom
// outer touchstart ，touchend ，touchmove
_outer.addEventListener("touchstart",startHd);
_outer.addEventListener("touchmove",moveHd);
_outer.addEventListener("touchend",endHd);
// transform
// ？touchmove, ，touchstart
var startX = 0,
moveX = 0,
nowX = 0;
// ，
function startHd(e) {
startX = e.targetTouches[0].pageX;
// console.log("start",e," ",e.targetTouches[0]);
}
function moveHd(e) {
// console.log("move",e);
moveX = e.targetTouches[0].pageX;
_inner.style.transform = `translate(${moveX - startX + nowX}px,0)`;
}
function endHd(e) {
// console.log("end",e);
nowX = moveX - startX + nowX;
if(nowX > 0) {
nowX = 0;
_inner.style.transform = `translate(0,0)`;
}
let min = _inner.offsetWidth * -1 + _outer.offsetWidth;
if(nowX <= min) {
nowX = min;
_inner.style.transform = `translate(${min}px,0)`;
}
}
script>
html>