元素をクリックしてジャンプを実現します.
1358 ワード
需要:JSで元素のクリックジャンプと長押しドラッグの効果を実現します.
構想:onmousedownとonmouseupイベントの時間差でクリックかドラッグかを判断します.時間差<300ミリ秒はクリックと思います.
コード:
構想:onmousedownとonmouseupイベントの時間差でクリックかドラッグかを判断します.時間差<300ミリ秒はクリックと思います.
コード:
Document
var div = document.getElementsByTagName("div")[0];
function drag(elem) {
var firstTime = 0;//
var lastTime = 0;//
elem.onmousedown = function (e) {
var mX = e.pageX - parseInt(elem.style.left);//
var mY = e.pageY - parseInt(elem.style.top);//
firstTime = new Date().getTime();//
document.onmousemove = function (e) {
elem.style.left = e.pageX - mX + "px";//
elem.style.top = e.pageY - mY + "px";//
}
}
elem.onmouseup = function () {
lastTime = new Date().getTime();//
if(lastTime - firstTime < 300){
console.log('click');// ， click
}
document.onmousemove = null;//
}
}
drag(div);