| <!DOCTYPE HTML> |
| <html> |
| <script src='test.js'></script> |
| <script src='dispatch_touch_event.js'></script> |
| <script> |
| |
| function setup(state, classes) { |
| for (let c of classes) { |
| state[c] = {}; |
| state[c].onTouchStart = function(event) { |
| state[c].touchStart = event; |
| }; |
| state[c].onTouchMove = function(event) { |
| state[c].touchMove = event; |
| }; |
| state[c].onTouchEnd = function(event) { |
| state[c].touchEnd = event; |
| }; |
| state[c].el = document.querySelector('.' + c); |
| state[c].el.addEventListener('touchstart', state[c].onTouchStart, false); |
| state[c].el.addEventListener('touchmove', state[c].onTouchMove, false); |
| state[c].el.addEventListener('touchend', state[c].onTouchEnd, false); |
| } |
| } |
| |
| function teardown(state) { |
| for (let c in state) { |
| state[c].el.removeEventListener('touchstart', state[c].onTouchStart, false); |
| state[c].el.removeEventListener('touchmove', state[c].onTouchMove, false); |
| state[c].el.removeEventListener('touchend', state[c].onTouchEnd, false); |
| } |
| } |
| |
| function testCorrectTarget1() { |
| var s = {}; |
| setup(s, ['div1', 'div2']); |
| dispatchTouchEvent(50, 50, 'touchstart'); |
| teardown(s); |
| assert(s.div1.touchStart && s.div1.touchStart.target === s.div1.el); |
| assert(!s.div2.touchStart); |
| } |
| |
| function testCorrectTarget2() { |
| var s = {}; |
| setup(s, ['div1', 'div2']); |
| dispatchTouchEvent(50, 150, 'touchstart'); |
| teardown(s); |
| assert(s.div2.touchStart && s.div2.touchStart.target === s.div2.el); |
| assert(!s.div1.touchStart); |
| } |
| |
| function testAllEvents() { |
| var s = {}; |
| setup(s, ['div1', 'div2']); |
| dispatchTouchEvent(10, 20, 'touchstart'); |
| dispatchTouchEvent(30, 40, 'touchmove'); |
| dispatchTouchEvent(50, 60, 'touchend'); |
| teardown(s); |
| assert(s.div1.touchStart); |
| assert(s.div1.touchStart.target === s.div1.el); |
| assert(s.div1.touchStart.touches[0].clientX === 10); |
| assert(s.div1.touchStart.touches[0].clientY === 20); |
| assert(s.div1.touchMove); |
| assert(s.div1.touchMove.target === s.div1.el); |
| assert(s.div1.touchMove.touches[0].clientX === 30); |
| assert(s.div1.touchMove.touches[0].clientY === 40); |
| assert(s.div1.touchEnd); |
| assert(s.div1.touchEnd.target === s.div1.el); |
| assert(s.div1.touchEnd.touches[0].clientX === 50); |
| assert(s.div1.touchEnd.touches[0].clientY === 60); |
| } |
| |
| </script> |
| <body> |
| <div style="width:100px;height:100px;" class="div1"></div> |
| <div style="width:100px;height:100px;" class="div2"></div> |
| </body> |
| </html> |
