一，下拉事件

html5下拉事件簡單實例

html5下拉事件簡單實例

未觸發事件！

//全局變量，觸摸開始位置

var startX = 0, startY = 0;

//touchstart事件

function touchSatrtFunc(evt) {

try

{

evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等

var touch = evt.touches[0]; //獲取第一個觸點

var x = touch.pageX; //頁面觸點X坐標

var y = touch.pageY; //頁面觸點Y坐標

//記錄觸點初始位置

startX = x;

startY = y;

var text = 'TouchStart事件觸發：(' + x + ', ' + y + ')';

document.getElementById("result").innerHTML = text;

}

catch (e) {

alert('touchSatrtFunc：' + e.message);

}

}

//touchmove事件，這個事件無法獲取坐標

function touchMoveFunc(evt) {

try

{

evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等

var touch = evt.touches[0]; //獲取第一個觸點

var x = touch.pageX; //頁面觸點X坐標

var y = touch.pageY; //頁面觸點Y坐標

var text = 'TouchMove事件觸發：(' + x + ', ' + y + ')';

if (y - startY < 100) {

text += '

下拉事件觸發';

bindEvent(1);

}

//document.getElementById("ggimgid").style["webkitTransform"] = 'translate(0px,' + (y - startY) + 'px) scale(1) translateZ(0px)';

document.getElementById("result").innerHTML = text;

}

catch (e) {

alert('touchMoveFunc：' + e.message);

}

}

//touchend事件

function touchEndFunc(evt) {

try {

evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等

var text = 'TouchEnd事件觸發';

document.getElementById("result").innerHTML = text;

}

catch (e) {

alert('touchEndFunc：' + e.message);

}

}

//綁定事件

function bindEvent(f) {

if(f==1){

document.removeEventListener('touchstart', touchSatrtFunc, false);

document.removeEventListener('touchmove', touchMoveFunc, false);

document.removeEventListener('touchend', touchEndFunc, false);

}else{

document.addEventListener('touchstart', touchSatrtFunc, false);

document.addEventListener('touchmove', touchMoveFunc, false);

document.addEventListener('touchend', touchEndFunc, false);

}

}

//判斷是否支持觸摸事件

function isTouchDevice() {

document.getElementById("version").innerHTML = navigator.appVersion;

try {

document.createEvent("TouchEvent");

//alert("支持TouchEvent事件！");

bindEvent(); //綁定事件

}

catch (e) {

//alert("不支持TouchEvent事件！" + e.message);

}

}

window.onload = isTouchDevice;

上拉事件

html5上拉事件簡單實例

html5上拉事件簡單實例

未觸發事件！

//全局變量，觸摸開始位置

var startX = 0, startY = 0;

//touchstart事件

function touchSatrtFunc(evt) {

try

{

evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等

var touch = evt.touches[0]; //獲取第一個觸點

var x = touch.pageX; //頁面觸點X坐標

var y = touch.pageY; //頁面觸點Y坐標

//記錄觸點初始位置

startX = x;

startY = y;

var text = 'TouchStart事件觸發：(' + x + ', ' + y + ')';

document.getElementById("result").innerHTML = text;

}

catch (e) {

alert('touchSatrtFunc：' + e.message);

}

}

//touchmove事件，這個事件無法獲取坐標

function touchMoveFunc(evt) {

try

{

evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等

var touch = evt.touches[0]; //獲取第一個觸點

var x = touch.pageX; //頁面觸點X坐標

var y = touch.pageY; //頁面觸點Y坐標

var text = 'TouchMove事件觸發：(' + x + ', ' + y + ')';

if (y - startY < -100) {

text += '

上拉事件觸發';

bindEvent(1);

}

//document.getElementById("ggimgid").style["webkitTransform"] = 'translate(0px,' + (y - startY) + 'px) scale(1) translateZ(0px)';

document.getElementById("result").innerHTML = text;

}

catch (e) {

alert('touchMoveFunc：' + e.message);

}

}

//touchend事件

function touchEndFunc(evt) {

try {

evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等

var text = 'TouchEnd事件觸發';

document.getElementById("result").innerHTML = text;

}

catch (e) {

alert('touchEndFunc：' + e.message);

}

}

//綁定事件

function bindEvent(f) {

if(f==1){

document.removeEventListener('touchstart', touchSatrtFunc, false);

document.removeEventListener('touchmove', touchMoveFunc, false);

document.removeEventListener('touchend', touchEndFunc, false);

}else{

document.addEventListener('touchstart', touchSatrtFunc, false);

document.addEventListener('touchmove', touchMoveFunc, false);

document.addEventListener('touchend', touchEndFunc, false);

}

}

//判斷是否支持觸摸事件

function isTouchDevice() {

document.getElementById("version").innerHTML = navigator.appVersion;

try {

document.createEvent("TouchEvent");

//alert("支持TouchEvent事件！");

bindEvent(); //綁定事件

}

catch (e) {

//alert("不支持TouchEvent事件！" + e.message);

}

}

window.onload = isTouchDevice;

總結

以上是生活随笔為你收集整理的html上拉下拉查看文字内容,html5上拉下拉事件效果演示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。