터치와 클릭 이벤트

아침7시개발·2022년 7월 7일
0

Js

목록 보기
4/4

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));
 });

출처

Fiddle meta

profile
쉬엄쉬엄하는 개발자

0개의 댓글