legacy project에 요청이 왔다.
터치 이벤트와 클릭이벤트가 필요하다는 요청이다.
서칭해본 결과 참고할만한 코드를 발견했다.
var arena = $('.container'),
total = $('#total');
var amount = 0;
var down = false;
arena.bind({
mousedown : function(){
down = true;
},
mousemove : function(){
if(!down) return;
amount += 20;
total.text(amount)
},
mouseup : function(){
down = false;
}
})
클릭을 유지하는 이벤트가 있는줄 몰랐는데 mousedown이 되면 mousemove를 bind해서 mouseon이 되었을 때 mousemove를 unbind처리하는 식이었다.
일단 페이지에 iframe이 세군데에 있어서 세군데에 따로 처리를 해줬다.
그냥 document에서 처리할 수 있으면 좋았을 텐데 iframe이라서 따로따로 처리했다.
한번에 처리할 수 있는 방법이 있으면 알고 싶다.
터치는 클릭보다 더 시간을 짧게 줬다. 길게 주니까 엄청 길게 스와이프 해야했다. 그래서 시간을 더 짧게 줬다.
//iframe 왼쪽 이벤트
document.querySelector("iframe.page_frame_left").addEventListener( "load", function() {
addWheelEvent ($(this));
addTouchEvent($(this));
addMouseEvent($(this),'left');
});
const addMouseEvent = (param, direction) => {
var arena = param.contents();
var down = false;
var amount = 0;
var start = 0;
arena.bind({
mousedown : function(event){
down = true;
start = event.pageX;
},
mousemove : function(event){
if(!down) return;
var now = event.pageX;
if (direction =='right' && amount < -100) {
moveNext(viewPort.isOnepageMode());
arena.unbind('mousemove');
return;
} else if (direction =='left' && amount > 100){
movePrev(viewPort.isOnepageMode());
arena.unbind('mousemove');
return;
} else {
if (now < start) {
amount -= 10;
} else {
amount += 10;
}
}
console.log(amount);
},
mouseup : function(event){
down = false;
amount = 0;
}
});
}
const addTouchEvent = (param, direction) => {
var arena = param.contents();
var down = false;
var amount = 0;
var start = 0;
arena.bind({
touchstart : function(event){
down = true;
start = event.pageX;
},
touchmove : function(event){
if(!down) return;
var now = event.pageX;
if (direction){
if (direction =='right' && amount < -20) {
moveNext(viewPort.isOnepageMode());
arena.unbind('mousemove');
return;
} else if (direction =='left' && amount > 20){
movePrev(viewPort.isOnepageMode());
arena.unbind('mousemove');
return;
} else {
if (now < start) {
amount -= 10;
} else {
amount += 10;
}
}
} else {
if ( amount < -20) {
moveNext(viewPort.isOnepageMode());
arena.unbind('touchmove');
} else if (amount > 20) {
movePrev(viewPort.isOnepageMode());
arena.unbind('touchmove');
} else {
if (now < start) {
amount -= 10;
} else {
amount += 10;
}
}
}
console.log(amount);
},
touchend : function(event){
down = false;
amount = 0;
}
});
}
//iframe 오른쪽 이벤트
document.querySelector("iframe.page_frame_right").addEventListener( "load", function() {
addWheelEvent ($(this));
addTouchEvent($(this));
addMouseEvent($(this),'right');
});
document.querySelector('#frame_onepage').addEventListener( "load", function() {
addTouchEvent($(this));
});
출처