Swipe

Type : Constructor

Support : 1.0

Extend : $B.Class

  • Touch Device에서 swipe, axis등의 Swipe를 생성하여 dispatch 한다.
  • 스마트폰이나 태블릿처럼 Touch가 되는 Device에서 대상영역을 Swipe시킬때 사용
    Android, iOS, Windows IE10~ Touch Device 지원.
    Mobile Safari v10, Mobile Chrome v56 에서 한쪽방향 Touch Scroll 차단 안되는 문제 해결

Methods

  • Swipe( target, option )

    Swipe 생성
    • target : ElementSelectorjQuery
      터치이벤트 발생시킬 대상
      ※대상 개체는 단일 개체.
    • option : Object
      • axiz : String
        Swipe 발생 축 설정, "vertical", "horizontal", "auto" (기본값 = "horizontal")
      • enableMouseEvent : Boolean
        터치 이벤트가 지원하지 않는 환경에서 mouse이벤트를 사용할지 여부. (v1.5.0부터 지원)
      • preventDefault : Boolean
        safari v10~ 에서 세로축 touchstart를 막고 싶을때만 설정. (v1.1.2 에서 해결되어 해당 옵션 삭제)

  • sensitivity( h, v ) : Swipever 1.0~

    민감도 설정, devicePixelRatio 기준, 기본값 1. 민감도를 Number로 지정, 1보다 커질수록 둔감해지고 작아질수록 민감해진다.
    • h : Number
      가로축 민감도 설정
    • v : Number
      세로축 민감도 설정, 설정하지 않으면 가로축을 따라간다.

  • swipeWidth() : Numberver 1.0~

    현재 디바이스 해상도에 맞게 민감도 보정이된 swipeWidth 기준값을 반환. ※ 기본 swipeWidth값은 '40'

  • swipeHeight() : Numberver 1.0~

    현재 디바이스 해상도에 맞게 민감도 보정이된 swipeHeight 기준값을 반환. ※ 기본 swipeHeight값은 '40'

  • enable() : Swipever 1.0~

    Swipe 검출 허용 설정

  • disable() : Swipever 1.0~

    Swipe 검출 비허용 설정

  • clear() : Swipever 1.0~

    이벤트 및 기본설정 삭제

Events

No. type description property ver
1 axis Touch 방향 추출 시점
  • target: TouchEvent가 발생한 대상
  • currentTarget: 최초에 등록한 대상
  • axis: vertical, horizontal, none
  • direction: top, right, bottom, left, none
  • pageX, e.pageY: TouchEvent가 발생한 죄표
 1.0
2 move Touch 이동 시점
  • target: TouchEvent가 발생한 대상
  • currentTarget: 최초에 등록한 대상
  • axis: 방향축
  • swipe: left, right, up, down, none
  • moveX, moveY: Touch가 움직인 총량
  • growX, growY: Touch가 1회 움직인량
  • pageX, e.pageY: TouchEvent가 발생한 죄표
  • duration: swipe가 발생하기 위해서 걸린 시간
  • speed: swipe의 속도 (수치가 클수록 빠르다)
 1.0
3 swipe swipe 발생 시점
  • target: TouchEvent가 발생한 대상
  • currentTarget: 최초에 등록한 대상
  • axis: 방향축
  • swipe: left, right, up, down, none
  • moveX, moveY: Touch가 움직인 총량
  • growX, growY: Touch가 1회 움직인량
  • pageX, e.pageY: TouchEvent가 발생한 죄표
  • duration: swipe가 발생하기 위해서 걸린 시간
  • speed: swipe의 속도 (수치가 클수록 빠르다)
 1.0

Example

var swipe = new $B.event.Swipe( '#wrap > div.banner' )
        //Swipe가 어느방향축으로 발생할지를 알수 있다, 가장먼저 dispatch된다.
        .addListener( 'axis', function (e) {
            console.log( e.type );//axis
        })
        //Touch Move가 발생할때 호출된다.
        .addListener( 'move', function (e) {
            console.log( e.type );//move
            console.log( e.growX, e.growY );//현재 Touch가 움직인양
        })
        //swipe가 발생할때 호출된다.
        .addListener( 'swipe', function (e) {
            console.log( e.type );//move
            console.log( e.swipe );
        });