TouchEvent

Type : Constructor

Support : 1.0

Extend : $B.Class

  • Touch Device에서 대상영역의 TouchEvent 검출기
  • 스마트폰이나 태블릿처럼 Touch가 되는 Device에서 대상영역의 TouchEvent 검출
    Android, iOS, Touch Device, Windows IE10~ 지원
    *IE는 CSS "touch-action"을 설정해 줘야 touchmove Event가 제대로 발생한다. ex) "-ms-touch-action:pan-x; touch-action:pan-x;"
    https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Methods

  • TouchEvent( target )

    TouchEvent 생성
    • target : ElementSelectorjQuery
      터치이벤트 발생시킬 대상 (하나의 대상의 하나의 TouchEvent생성)
      ※대상 개체는 단일 개체.

  • addListener( type, listener, options ) : TouchEventver 1.0~

    리스너 등록

  • removeListener( type, listener, options ) : TouchEventver 1.0~

    리스너 삭제
    • type : String
      Listener type, 입력하지 않으면 모든 리스너 삭제
    • listener : Function
      Listener, 입력하지 않으면 모든 리스너 삭제
    • options : ObjectBoolean
      useCapture, passive 등등, 입력하지 않으면 type과 listener만 비교하여 삭제

  • hasListener( type, listener, options ) : Booleanver 1.0~

    리스너 등록여부 반환
    • type : String
      Listener type, 입력하지 않으면 모든 리스너 체크
    • listener : Function
      Listener, 입력하지 않으면 type만 체크
    • options : ObjectBoolean
      useCapture, passive 등등, 입력하지 않으면 type과 listener만 체크

  • clear() : TouchEventver 1.0~

    이벤트 및 기본설정 삭제

Events

No. type description property ver
1 touchstart TouchEvent 시점
  • target
  • currentTarget
  • relatedTarget
  • eventPhase
  • shiftKey
  • altKey
  • ctrlKey
  • touches
https://developer.mozilla.org/en-US/docs/Web/Events/touchstart 와 유사 		1.0
2 touchmove TouchEvent 이동 시점
  • target
  • currentTarget
  • relatedTarget
  • eventPhase
  • shiftKey
  • altKey
  • ctrlKey
  • touches
https://developer.mozilla.org/en-US/docs/Web/Events/touchmove 와 유사 		1.0
3 touchend TouchEvent 끝나는 시점
  • target
  • currentTarget
  • relatedTarget
  • eventPhase
  • shiftKey
  • altKey
  • ctrlKey
  • touches
https://developer.mozilla.org/en-US/docs/Web/Events/touchend 와 유사 		1.0
3 touchcancel TouchEvent를 잃어 버린 시점
  • target
  • currentTarget
  • relatedTarget
  • eventPhase
  • shiftKey
  • altKey
  • ctrlKey
  • touches
https://developer.mozilla.org/en-US/docs/Web/Events/touchcancel 와 유사 		1.0

Example

var touchEvent = new $B.event.TouchEvent( '#wrap > div.banner' )
   .addListener( 'touchstart', function (e) {
      console.log( e.type );
      console.log( e.touches ); //배열로 전달되는 터치 객체
         //touches[0] = {target, pageX, pageY, clientX, clientY, screenX, screenY, pointerType}
         //pointerType = 'touch', 'pen', 'mouse'
         //IE이외의 브라우저에서는 'touch'만 반환

      e.stopPropagation(); //부모태그로의 이벤트 전파되는 것을 차단.
      e.preventDefault(); //이벤트가 브라우저에 전파되는 것을 차단.
   });