Chapter 5: Handling Touch Interactions and Events Capturing Two-Finger Scrolling Pinching và flicking được coi là các yếu tố đầu vào liên lạc phổ biến nhất cho iPhone và iPod touch, nhưng như là một nhà phát triển, bạn không có cách nào để nắm bắt những sự kiện này cho các mục đích của riêng bạn. Bạn phải đi cùng với những gì Điện thoại di động Safari hiện theo mặc định. | Chapter 5 Handling Touch Interactions and Events Capturing Two-Finger Scrolling Pinching and flicking are arguably the most popular touch inputs for iPhone and iPod touch but as a developer you have no way to capture these events for your own purposes. You have to go along with what Mobile Safari does by default. However you do have a way to manipulate a less popular touch input the two-finger scroll. While a one-finger scroll is used to move an entire page around the two-finger scroll can be used to scroll inside any scrollable region of a page such as a textarea. Because Mobile Safari supports the overriding of the event you can use the two-finger scroll for your own purposes. Suppose for example you would like to control the vertical position of a ball image based on the two-finger scroll input of the user inside of a scrollable region. When the user scrolls up you want the ball to move up. When the user scrolls down you want the ball to move down. Figure 5-5 shows the UI layout for this example. Start with the page layout and styles DOCTYPE html PUBLIC - W3C DTD XHTML Strict EN http TR xhtml1 DTD html xmlns http 1999 xhtml head title ScrollPad title meta name viewport content width 320 initial-scale maximum-scale user-scalable 0 style type text css media screen body margin 0 padding 0 width 320px height 416px font-family Helvetica -webkit-user-select none cursor default continued 113 Chapter 5 Handling Touch Interactions and Events continued -webkit-text-size-adjust none background 000000 color FFFFFF leftPane position absolute width 160px height 100 rightPane position absolute width 140px left 161px height 100 scrollPad width 148px top 3px height 300px border-style none background-image url blueDot position absolute left 50px top 10px style head body div id leftPane p Use a two-finger scroll in the scrollpad to move the blue dot. p form textarea id scrollPad readonly readonly .
