滑鼠拖拽事件變成觸控事件

2021-10-05 23:18:53 字數 2443 閱讀 6540

滑鼠·拖拽事件:

// 彈窗滑動事件

var mousetop, prevtop=nextop=moveoffset=

0, resetflag=

false

;var slidecontainer = document.

getelementsbyclassname

("container")[

0];var slidemove = document.

getelementsbyclassname

("phone")[

0];//滑鼠開始拖拽

slidemove.

addeventlistener

("mousedown"

,start)

;function

start

(e)//獲取開始位置,該div含有margin值,防止拖拽時出現位置偏移

prevtop = e.pagey - slidecontainer.offsettop +

parseint

(getcomputedstyle

(slidecontainer)

['margin-top'])

;//滑鼠進行拖拽

document.

addeventlistener

("mousemove"

,move)

;//滑鼠拖拽結束

document.

addeventlistener

("mouseup"

,cancel)

;stopevent

(e);

}function

move

(e)//當位移偏移量小於0時,彈窗位於頁面底部

elseif(

-moveoffset >=0)

//否則繼續向下移動

else

"偏移量是 " + moveoffset + ", 上次距離父容器頂部是 " + prevtop + ", 本次距離父容器頂部是 " + nextop);

prevtop = nextop;

}stopevent

(e);

}//當滑鼠拖拽結束之後,解除事件繫結

function

cancel

(e)// 阻止預設事件和冒泡事件

function

stopevent

(e)else

}

觸控事件:

// 彈窗滑動事件

var mousetop, prevtop=nextop=moveoffset=

0, resetflag=

false

;var slidecontainer = document.

getelementsbyclassname

("container")[

0];var slidemove = document.

getelementsbyclassname

("phone")[

0];//開始觸控事件

slidemove.

addeventlistener

("touchstart"

,start)

;function

start

(e)//獲取初始位置,該div含有margin值,防止拖拽時出現位置偏移

prevtop=e.targettouches[0]

.pagey-slidecontainer.offsettop +

parseint

(getcomputedstyle

(slidecontainer)

['margin-top'])

; console.

log(

"start");

stopevent

(e);

}//觸控過程事件

slidemove.

addeventlistener

("touchmove"

,move)

;function

move

(e)//當位移偏移量小於0時,彈窗位於頁面底部

elseif(

-moveoffset>=0)

//否則繼續向下移動

else

prevtop = nextop;

console.

log(

"move");

stopevent

(e);

}//觸控事件結束

// slidemove.addeventlistener("touchend",function(e));

//阻止預設事件和冒泡事件

function

stopevent

(e)else

}

js滑鼠拖拽事件

只記錄left,top同理。clientx 返回滑鼠相對於瀏覽器的水平座標 offsetleft 返回當前物件距離瀏覽器 父物件 的左側距離 offsetwidth 物件的可見寬度 onmousemove 滑鼠移動事件 連線點是滑鼠放在div上拖動時的位置 座標 不會改變的,起名字為unchangx...

JavaFX滑鼠拖拽事件

滑鼠拖拽進入node node.setonmousedragentered event 滑鼠拖拽退出node node.setonmousedragexited event 滑鼠拖拽經過node 入 出 node.setonmousedragover event 滑鼠拖拽釋放 node.setonm...

用滑鼠事件寫 拖拽

onmousedowm onmousemove onmouseup 如果把移動事件放在box上,那麼當滑鼠移動快的時候,滑鼠會脫離盒子,導致盒子不跟著滑鼠走。解決 把移動事件放在document上,就能解決 如果把抬起事件放在box上,那麼滑鼠放到了瀏覽器的位址列時,鬆開滑鼠還會導致盒子一直跟著滑鼠...