詳細検索

AngularUI 캘린더(FullCalendar) dayiOS에서 클릭이 예상대로 작동하지 않음

아바타
글쓴이 furuyamah
4분 읽기

AngularUI 캘린더(FullCalendar) dayiOS에서 클릭이 예상대로 작동하지 않음
日本語에서 번역 • 원문 보기

이 이야기는 angularUI Calendar 1.0.0과 FullCalendar 2.1.1에서 Bower에 넣은 것입니다.

AngularUI 캘린더 http://angular-ui.github.io/ui-calendar/ Angular WEB 앱에서 캘린더에 대한 요구를 완벽하게 충족시켜 줍니다.

하지만 dayClick을 사용해 월 표시와 day를 셀 클릭으로 전환하면, 아이폰에서는 이상하게도 잘 작동하지 않습니다.

정확히 말하면, 탭 대신 누르고 1초 정도 누르거나 태양 셀을 살짝 끌면 dayClick이 호출됩니다.

왜!

약 3일 정도 고민하다가 결국 해결했으니 공유하겠습니다. 참고로, AngularUI 캘린더는 FullCalendar의 래퍼라서 FullCalendar에서 비슷한 문제를 겪는 분들에게도 잘 작동할 거예요.... is.

원인

이는 드래그 이벤트 처리 방식의 차이 때문입니다. dayClick은 클릭 이벤트에 의해 호출되는 것이 아닙니다. 드래그가 끝났을 때 호출됩니다. iOS의 Safari(정확히는 웹킷?) 그렇지 않으면 드래그 시작과 드래그 종료 이벤트가 손가락을 탭하고 놓는 순간에 발생하지만, iOS에서는 드래그하거나 계속 탭하지 않으면 드래그 종료 이벤트가 발생하지 않는 것 같습니다.

탭 이벤트에서 dayClick을 호출하는 FullCalendar.js을 수정했습니다.

4038번 라인 근처에서

    coordMap: null, // 픽셀 값을 날짜 시간으로 변환하는 GridCoordMap
    cellDuration: null, // 셀의 지속 시간. 서브클래스는 이를 최대한 빨리 할당해야 합니다
    isTouch : false, // 터치와 스크롤을 분리하세요. 

    그리드를 '엘' 요소로 렌더링합니다. 

4093번 라인 근처에서

        this.el.on('mousedown', function(ev) { 
            만약 ( 
                !$(ev.target).is('.fc-event-container *, .fc-more') & // 이벤트가 아니거나 "more.." 링크가 아닙니다
                !$(ev.target).closest('.fc-popover').length // 팝오버에는 포함되지 않습니다(예를 들어 'more.." 이벤트)
            ) { 
                _this.dayMousedown(ev); 
            }
        }); 

        this.el.on('touchstart', 함수 (ev) { 
            this.isTouch = 참; 
        }); 

        this.el.on('touchmove', 함수 (ev) { 
            this.isTouch = false; 
        }); 

        this.el.on('touchend', 함수 (ev) { 
                만약 (this.isTouch == false) { 
                    스크롤일 수도 있습니다. 
                    복귀; 
                }
                만약 ( 
                    !$(ev.target).is('.fc-event-container *, .fc-more') & // 이벤트가 아니거나 "more.." 링크가 아닙니다
                    !$(ev.target).closest('.fc-popover').length // 팝오버에는 포함되지 않습니다(예를 들어 'more.." 이벤트)
                ) { 
                    _this.touchEnd(ev); 
                }
            }
        ); 

        this.bindSegHandlers(); 이벤트 요소 관련 핸들러를 부착합니다. Grid.events.js에서
    }, 

    touchEnd: function(ev){ 
        console.log("터치 엔드 호출됨."); 
        var _this = 이것; 
        var view = this.view; 

        this.coordMap.build(); 
        var cell = _this.coordMap.getCell(ev.originalEvent.pageX, ev.originalEvent.pageY); 
        var dayEl = _this.getCellDayEl(cell); 
        view.trigger('dayClick', dayEl[0], cell.date, ev); 
    }, 

    하루를 나타내는 요소에서 마우스다운을 처리하세요. 하루를 클릭하고 선택하는 경우. 
    dayMousedown: function(ev) { 

단순히 touchend를 잡으면 끌릴 때 이상한 동작이 나올 수 있어서, Touchstart와 touchmove를 잡아 드래그와 탭을 식별합니다.

도움이 되길 바랍니다!

fullcalendar.js fullcalendar.js 변경됨

Related Articles