<!DOCTYPE><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><meta name="format-detection" content="telephone=no"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="white"><style type="text/css">* { padding:0; margin:0;}#div1 { width:100px; height:100px; background-color:Red; position:absolute;}</style><script language="javascript" type="text/javascript">function PhoneDrag(id) {var _this = this;this.oDiv = document.getElementById(id);this.disX = 0;this.disY = 0;this.oDiv.addEventListener("touchstart", function (ev) {_this.fnDown(ev);}, false);}PhoneDrag.prototype.fnDown = function (ev) {var _this = this;var oEvent = ev.touches[0];ev.preventDefault();this.disX = oEvent.clientX - this.oDiv.offsetLeft;this.disY = oEvent.clientY - this.oDiv.offsetTop;document.addEventListener("touchmove", function (ev) {_this.fnMove(ev);}, false);document.addEventListener("touchend", function (ev) {//這里是手指抬起的時候 如何刪除touchmove事件document.removeEventListerner(document, "這里怎么填");}, false);}PhoneDrag.prototype.fnMove = function (ev) {var oEvent = ev.touches[0];var iX = oEvent.clientX - this.disX;var iY = oEvent.clientY - this.disY;this.oDiv.style.top = iY + "px";this.oDiv.style.left = iX + "px";}window.onload = function () {new PhoneDrag("div1");}</script></head><body><div id="div1"></div></body></html>這是移動端移動DIV的例子
2 回答
POPMUISE
TA貢獻1765條經驗 獲得超5個贊
|
只有被addEventListener方法添加的事件才可以使用removeEventListener來注銷．
刪除事件時removeEventListener的三個參數必須要跟addEventListener的參數相同
語法：elem.removeEventListener(event_type,fun_name,bool);
event_type:事件類型．比如單擊，或雙擊．或移動鼠標事件等．
fun_name:要被注銷的事件名稱，函數名．
bool:布爾值．true或false.true代表支持事件冒泡．false則不支持事件冒泡捕獲
慕碼人8056858
TA貢獻1803條經驗 獲得超6個贊
function PhoneDrag(id) { var _this = this; this.oDiv = document.getElementById(id); this.disX = 0; this.disY = 0; this.oDiv.addEventListener("touchstart", function (ev) { _this.fnDown(ev); }, false); }PhoneDrag.prototype.fnDown = function (ev) { var _this = this; var oEvent = ev.touches[0]; ev.preventDefault(); this.disX = oEvent.clientX - this.oDiv.offsetLeft; this.disY = oEvent.clientY - this.oDiv.offsetTop; // 解除事件綁定的時候需要用到 var touchmoveHandle = function (ev) { _this.fnMove(ev); }; document.addEventListener("touchmove", touchmoveHandle, false); document.addEventListener("touchend", function (ev) { //這里是手指抬起的時候 如何刪除touchmove事件 document.removeEventListerner('touchmove', touchmoveHandle, false); }, false); }PhoneDrag.prototype.fnMove = function (ev) { var oEvent = ev.touches[0]; var iX = oEvent.clientX - this.disX; var iY = oEvent.clientY - this.disY; this.oDiv.style.top = iY + "px"; this.oDiv.style.left = iX + "px";} window.onload = function () { new PhoneDrag("div1");} |
- 2 回答
- 0 關注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消