새 지도 터치스크린 이벤트 분리

tmp_map/map.js

@@ -267,7 +267,10 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
 
         var $map_body = $('.world_map .map_body');
 
+        //터치스크린 탭
+        
         $objs.bind('touchstart', function(e){
+            console.log('touchstart');
             var $this = $(this);
             
             var touchMode = $this.data('touchMode');
@@ -280,26 +283,21 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
             else{
                 $this.data('touchMode', touchMode + 1);
             }
+            $map_body.data('touchMode', 1);
+
+            $tooltip_city.data('target', $this.data('id'));
             
-            $tooltip_city.data('target', $this.data('id'))
             
         });
         
-        $map_body.bind('mousemove', function(e){
+        $objs.bind('touchend', function(e){    
-            var parentOffset = $map_body.offset(); 
+            console.log('touchend');
-            var relX = e.pageX - parentOffset.left;
-            var relY = e.pageY - parentOffset.top;
-            
-            $tooltip.css({'top': relY + 10, 'left': relX + 10});
-        });
-
-        $objs.bind('mouseenter touchend', function(e){
             var $this = $(this);
-
+            var position = $this.parent().position();
+            console.log(position);
             $tooltip_city.html($this.data('text'));
             $tooltip_nation.html($this.data('nation'));
-            $tooltip_city.data('target', $this.data('id'));
+            $tooltip.css({'top': position.top + 25, 'left': position.left + 35}).show();
-            $tooltip.show();
             return false;
         });
 
@@ -308,10 +306,6 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
             $tooltip.hide();
         });
 
-        $objs.bind('mouseleave', function(event){
-            $tooltip.hide();
-        });
-
         $objs.bind('click', function(){
             //touch의 경우 첫 터치는 tooltip을 보여주고, 두번째는 클릭
             var $this = $(this);
@@ -328,6 +322,40 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
             return true;
         });
 
+        //Mouse over 모드 작동
+
+        $map_body.bind('mousemove', function(e){
+            if($(this).data('touchMode')){
+                return true;
+            }
+
+            var parentOffset = $map_body.offset(); 
+            var relX = e.pageX - parentOffset.left;
+            var relY = e.pageY - parentOffset.top;
+            
+            $tooltip.css({'top': relY + 10, 'left': relX + 10});
+        });
+
+        $objs.bind('mouseenter', function(e){
+            console.log('mouseenter');
+            var $this = $(this);
+            //mouseenter는 터치에서는 없는 마우스 고유 기능임.
+            $this.removeData('touchMode');
+            $map_body.removeData('touchMode');
+
+            $tooltip_city.data('target', $this.data('id'));
+            $tooltip_city.html($this.data('text'));
+            $tooltip_nation.html($this.data('nation'));
+
+            $tooltip.show();
+        });
+
+        $objs.bind('mouseleave', function(event){
+            $tooltip.hide();
+        });
+
+        
+
 
         return obj;
     }