### Track Complete Swipe Lifecycle with TouchJs

Source: https://context7.com/rehiy/touch-js/llms.txt

This advanced example shows how to track the entire lifecycle of a swipe gesture, including start, move, and end phases. It demonstrates updating an element's position during a swipe and resetting it upon completion, while preventing default browser behavior.

```javascript
// Track complete swipe gesture lifecycle
var dragElement = document.getElementById('draggable');
var initialTop = 0, initialLeft = 0;

touch(dragElement)
  .on('swipestart', function(e) {
    console.log('Swipe started at:', e.pageX, e.pageY);
    // Store initial position
    initialTop = parseInt(this.style.top || 0);
    initialLeft = parseInt(this.style.left || 0);
    this.style.position = 'relative';
    this.style.background = '#ddd';
  })
  .on('swipe', function(e) {
    console.log('Swiping - Move delta:', e.moveX, e.moveY);
    // Update element position during drag
    this.style.top = (initialTop + e.moveY) + 'px';
    this.style.left = (initialLeft + e.moveX) + 'px';
    // Prevent browser default behavior (scrolling)
    return false;
  })
  .on('swipeend', function(e) {
    console.log('Swipe ended');
    console.log('Total movement:', e.moveX, e.moveY);
    // Snap back to original position
    this.style.position = 'static';
    this.style.top = '0';
    this.style.left = '0';
    this.style.background = '#fff';
  });
```

--------------------------------

### TouchJs Basic Usage and Event Handling (JavaScript)

Source: https://github.com/rehiy/touch-js/blob/master/README.md

Demonstrates the basic initialization of TouchJs on an element and how to attach event listeners for 'tap' and 'longtap' gestures. It also shows how to use event delegation to handle taps on elements with a specific class within the target element. The 'swipe' event example illustrates how to prevent the browser's default behavior for smoother interactions. Dependencies include the TouchJs library itself. Inputs are DOM elements or selectors, and outputs are console logs. Limitations include the lack of support for two-finger gestures.

```javascript
touch(document.getElementById('toucher'))
//轻击事件
.on('tap',function(e) {
    console.log(this, e);
})
//长按事件
.on('longtap',function(e) {
    console.log(this, e);
})
//委托轻击事件
.on('tap', '.class', function(e) {
    console.log(this, e);
    return false
});
```

--------------------------------

### JavaScript Accessing Event Properties with Touch.js

Source: https://context7.com/rehiy/touch-js/llms.txt

Illustrates how to access detailed information about touch and gesture events through the event object `e`. Properties include event type, current and start coordinates, movement deltas, and the target element. Useful for calculating distances, angles, and understanding gesture specifics.

```javascript
touch(document.getElementById('touchArea'))
  .on('swipe', function(e) {
    // Event type
    console.log('Type:', e.type); // 'swipe'

    // Current position
    console.log('Current X:', e.pageX);
    console.log('Current Y:', e.pageY);
    console.log('Client X:', e.clientX);
    console.log('Client Y:', e.clientY);

    // Start position (only available in swipe events)
    console.log('Start X:', e.startX);
    console.log('Start Y:', e.startY);

    // Movement delta (only available in swipe events)
    console.log('Move X:', e.moveX);
    console.log('Move Y:', e.moveY);

    // Target element
    console.log('Target:', e.target);

    // Calculate distance and angle
    var distance = Math.sqrt(e.moveX * e.moveX + e.moveY * e.moveY);
    var angle = Math.atan2(e.moveY, e.moveX) * 180 / Math.PI;
    console.log('Distance:', distance, 'Angle:', angle);
  });
```

--------------------------------

### Implement Vertical Range Control with TouchJs

Source: https://github.com/rehiy/touch-js/blob/master/ex2.html

This example demonstrates the creation of a vertical slider or range control using TouchJs. Similar to the horizontal version, it responds to 'swipestart', 'swipe', and 'swipeend' events. The 'swipe' event adjusts the element's top position, and 'swipeend' calculates and displays the corresponding percentage value.

```javascript
var start_top,
    elem = document.getElementById('progressB');
function rangeControl(num,max){
  num = Math.max(num,0);
  return Math.min(num,max);
}
touch(elem)
    .on('swipestart','.progress-bar',function(e){
      start_top = parseInt(this.style.top) || 0;
      this.innerHTML = '';
    }).on('swipe','.progress-bar',function(e){
      this.style.top = rangeControl(start_top + e.moveY,elem.clientHeight - this.clientHeight) + 'px';
      return false;
    }).on('swipeend','.progress-bar',function(e){
      this.innerHTML = Math.ceil(rangeControl(start_top + (e.moveY||0),elem.clientHeight - this.clientHeight)/(elem.clientHeight - this.clientHeight) * 100) + '%';
      return false;
    });
```

--------------------------------

### Detect Swipe Gestures in Four Directions with TouchJs

Source: https://context7.com/rehiy/touch-js/llms.txt

This code illustrates how to detect swipe gestures in the four cardinal directions: up, down, left, and right. It provides examples of corresponding actions for each swipe direction, such as navigation or content refresh.

```javascript
// Handle all four swipe directions
var container = document.getElementById('swipeArea');
touch(container)
  .on('swipeup', function(e) {
    console.log('Swiped up');
    console.log('Start position:', e.startX, e.startY);
    console.log('End position:', e.pageX, e.pageY);
    console.log('Movement delta:', e.moveX, e.moveY);
    // Navigate to previous page
    navigatePrevious();
  })
  .on('swipedown', function(e) {
    console.log('Swiped down');
    // Pull to refresh
    refreshContent();
  })
  .on('swipeleft', function(e) {
    console.log('Swiped left');
    // Show next slide
    nextSlide();
  })
  .on('swiperight', function(e) {
    console.log('Swiped right');
    // Show previous slide
    previousSlide();
  });
```

--------------------------------

### Implement Long Press Delete with TouchJs

Source: https://github.com/rehiy/touch-js/blob/master/ex2.html

This example shows how to implement a 'longtap' gesture using TouchJs for a delete action. It attaches a long press event listener to list items within a specific group, triggering an alert dialog upon detection. This pattern is useful for hiding delete functionality until explicitly invoked by the user.

```javascript
touch(document.getElementById('listGroupB'))
    .on('longtap','.list-item',function(){
      alert('这只是个demo！');
    });
```

--------------------------------

### Initialize TouchJs Instance for DOM Element

Source: https://context7.com/rehiy/touch-js/llms.txt

This snippet demonstrates how to create a new TouchJs instance for a given DOM element. This is the initial step to enable gesture event handling on that element. It can target native DOM elements or jQuery-selected elements.

```javascript
var element = document.getElementById('toucher');
var touchInstance = touch(element);

// Can also work with jQuery-selected elements
var jqueryElement = $('#toucher')[0];
var touchInstance = touch(jqueryElement);
```

--------------------------------

### JavaScript Image Gallery with Touch Gestures

Source: https://context7.com/rehiy/touch-js/llms.txt

Implements a swipeable image gallery using TouchJS. It handles swipe left/right for navigation, double-tap for zooming, and long-press to show image data. Dependencies include the TouchJS library and basic HTML structure for the gallery and images. Returns `false` from handlers to prevent default browser actions.

```javascript
// Complete swipeable image gallery implementation
var gallery = document.getElementById('imageGallery');
var currentIndex = 0;
var images = gallery.querySelectorAll('.image');
var totalImages = images.length;

touch(gallery)
  // Swipe left to next image
  .on('swipeleft', function(e) {
    if (currentIndex < totalImages - 1) {
      currentIndex++;
      updateGallery();
    }
    return false; // Prevent scrolling
  })
  // Swipe right to previous image
  .on('swiperight', function(e) {
    if (currentIndex > 0) {
      currentIndex--;
      updateGallery();
    }
    return false;
  })
  // Double tap to zoom
  .on('doubletap', function(e) {
    var currentImage = images[currentIndex];
    if (currentImage.classList.contains('zoomed')) {
      currentImage.classList.remove('zoomed');
      currentImage.style.transform = 'scale(1)';
    } else {
      currentImage.classList.add('zoomed');
      currentImage.style.transform = 'scale(2)';
    }
  })
  // Long press to show info
  .on('longtap', function(e) {
    var imageInfo = images[currentIndex].getAttribute('data-info');
    showImageInfo(imageInfo);
  });

function updateGallery() {
  var offset = -currentIndex * 100;
  gallery.style.transform = `translateX(${offset}%)`;
}

// Additional helper function
function showImageInfo(info) {
  var infoPanel = document.getElementById('infoPanel');
  infoPanel.textContent = info;
  infoPanel.style.display = 'block';
  setTimeout(() => {
    infoPanel.style.display = 'none';
  }, 3000);
}
```

--------------------------------

### JavaScript Avalon.js Integration with Touch.js

Source: https://context7.com/rehiy/touch-js/llms.txt

Shows how to integrate Touch.js with the Avalon.js framework (version 1.5.x) using a provided plugin (`touch_for_avalon.js`). The plugin automatically registers event hooks for Avalon, allowing direct use of touch events in Avalon view models and HTML templates via directives like `ms-tap` and `ms-swipe`.

```javascript
// Avalon.js framework integration (using touch_for_avalon.js)
// The plugin automatically registers event hooks for Avalon

// In Avalon view model
var vm = avalon.define({
  $id: 'app',
  handleTap: function(e, args) {
    console.log('Tap event from Avalon:', e);
    console.log('Additional args:', args);
  },
  handleSwipe: function(e, args) {
    console.log('Swipe event:', e.moveX, e.moveY);
  }
});

// In HTML template
// <div ms-tap="handleTap">Tap me</div>
// <div ms-swipe="handleSwipe">Swipe me</div>

// Supported events in Avalon:
// ms-tap, ms-longtap, ms-doubletap
// ms-swipe, ms-swipestart, ms-swipeend
// ms-swipeup, ms-swiperight, ms-swipedown, ms-swipeleft
```

--------------------------------

### Handle Basic Tap Gestures with TouchJs

Source: https://context7.com/rehiy/touch-js/llms.txt

This section covers handling basic tap gestures including single tap, double tap, and long press. It shows how to attach event listeners for these gestures and access event details like coordinates and target element.

```javascript
// Single tap event
touch(document.getElementById('button'))
  .on('tap', function(e) {
    console.log('Tapped at:', e.pageX, e.pageY);
    console.log('Target element:', e.target);
    console.log('Event type:', e.type);
  });

// Double tap event
touch(document.getElementById('button'))
  .on('doubletap', function(e) {
    console.log('Double tapped!');
    // Zoom in functionality
    element.style.transform = 'scale(1.5)';
  });

// Long press event (600ms threshold)
touch(document.getElementById('button'))
  .on('longtap', function(e) {
    console.log('Long press detected');
    // Show context menu
    showContextMenu(e.pageX, e.pageY);
  });
```

--------------------------------

### Implement Free Dragging with TouchJs

Source: https://github.com/rehiy/touch-js/blob/master/ex2.html

This code snippet utilizes TouchJs to enable free dragging of an element, commonly used for floating UI components. It listens for 'swipestart', 'swipe', and 'swipeend' events to manage the element's position and visual state during the drag operation. The element's transition is temporarily disabled for smooth dragging and then reapplied.

```javascript
var start_left,start_top;
touch(document.getElementById('assistiveTouch'))
    .on('swipestart',function(e){
      start_left = parseInt(this.style.left) || 0;
      start_top = parseInt(this.style.top) || 0;
      this.style.transition = 'none';
      this.style.opacity = 1;
    }).on('swipe',function(e){
      this.style.left = (start_left + e.moveX) + 'px';
      this.style.top = (start_top + e.moveY) + 'px';
      return false;
    }).on('swipeend',function(e){
      this.style.transition = '.1s';
      this.style.left = '0px';
      this.style.top = '0px';
      this.style.opacity = '';
    });
```

--------------------------------

### Implement Horizontal Range Control with TouchJs

Source: https://github.com/rehiy/touch-js/blob/master/ex2.html

This JavaScript code uses TouchJs to create a horizontal slider or range control. It monitors 'swipestart', 'swipe', and 'swipeend' events on a progress bar element. The 'swipe' event updates the element's left position within its container, and 'swipeend' calculates and displays the percentage value based on the final position.

```javascript
var start_left,
    elem = document.getElementById('progressA');
function rangeControl(num,max){
  num = Math.max(num,0);
  return Math.min(num,max);
}
touch(elem)
    .on('swipestart','.progress-bar',function(e){
      start_left = parseInt(this.style.left) || 0;
      this.innerHTML = '';
    }).on('swipe','.progress-bar',function(e){
      this.style.left = rangeControl(start_left + e.moveX,elem.clientWidth - this.clientWidth) + 'px';
      return false;
    }).on('swipeend','.progress-bar',function(e){
      this.innerHTML = Math.ceil(rangeControl(start_left + (e.moveX||0),elem.clientWidth - this.clientWidth)/(elem.clientWidth - this.clientWidth) * 100) + '%';
      return false;
    });
```

--------------------------------

### Implement Swipe-to-Delete Gesture with TouchJs

Source: https://github.com/rehiy/touch-js/blob/master/ex2.html

This snippet demonstrates how to implement a common mobile interaction: swipe-to-delete for list items. It uses TouchJs to detect 'swipeleft' and 'swiperight' events on list items, applying CSS classes to visually indicate deletion status. A 'tap' event is also handled on a delete confirmation element.

```javascript
touch(document.getElementById('listGroupA'))
    .on('swipeleft','.list-item',function(){
      addClass(this,'list-item-status-del');
      return false;
    })
    .on('swiperight','.list-item',function(){
      removeClass(this,'list-item-status-del');
      return false;
    })
    .on('tap','.list-item-del',function(){
      alert('这只是个demo！');
    });
```

--------------------------------

### JavaScript Chaining Multiple Events with Touch.js

Source: https://context7.com/rehiy/touch-js/llms.txt

Chains multiple gesture event handlers onto a single element for cleaner and more organized code. This allows for defining distinct actions for different gestures like 'tap', 'doubletap', 'longtap', 'swipeup', and 'swipedown' on the same element.

```javascript
var interactivePanel = document.getElementById('panel');

touch(interactivePanel)
  .on('tap', function(e) {
    console.log('Panel tapped');
    this.classList.add('tapped');
  })
  .on('doubletap', function(e) {
    console.log('Panel double-tapped');
    this.classList.toggle('expanded');
  })
  .on('longtap', function(e) {
    console.log('Panel long-pressed');
    showOptions(this);
  })
  .on('swipeup', function(e) {
    console.log('Swiped up on panel');
    minimizePanel(this);
  })
  .on('swipedown', function(e) {
    console.log('Swiped down on panel');
    expandPanel(this);
  });
```

--------------------------------

### JavaScript Event Delegation with Touch.js

Source: https://context7.com/rehiy/touch-js/llms.txt

Delegates touch and gesture events to child elements within a specified container using CSS class selectors. This is useful for handling events on dynamically added elements. It supports events like 'tap', 'swipeleft', and 'swiperight'.

```javascript
var container = document.getElementById('container');

touch(container)
  // Delegate tap event to all elements with 'button' class
  .on('tap', '.button', function(e) {
    console.log('Button tapped:', this);
    console.log('Event target:', e.target);
    // 'this' refers to the delegated element
    this.classList.toggle('active');
  })
  // Delegate swipe to 'card' class elements
  .on('swipeleft', '.card', function(e) {
    console.log('Card swiped left');
    // Remove card with animation
    this.style.transition = 'transform 0.3s';
    this.style.transform = 'translateX(-100%)';
    return false; // Prevent default scrolling
  })
  .on('swiperight', '.card', function(e) {
    console.log('Card swiped right');
    this.style.transition = 'transform 0.3s';
    this.style.transform = 'translateX(100%)';
    return false;
  });
```

--------------------------------

### JavaScript Preventing Default Browser Behavior with Touch.js

Source: https://context7.com/rehiy/touch-js/llms.txt

Demonstrates how to prevent default browser actions, such as scrolling, during custom touch interactions like dragging or swiping. This is achieved by returning `false` from the event handler. Useful for custom slider or drag-and-drop implementations.

```javascript
var customSlider = document.getElementById('slider');

touch(customSlider)
  .on('swipe', function(e) {
    // Get swipe distance
    var distance = e.moveX;
    console.log('Slider moved:', distance);

    // Update slider position
    var currentPosition = parseInt(this.getAttribute('data-position') || 0);
    var newPosition = currentPosition + distance;
    this.style.transform = `translateX(${newPosition}px)`;

    // Return false to prevent browser default scrolling
    // This is essential for smooth custom interactions
    return false;
  })
  .on('swipeend', function(e) {
    // Snap to nearest position
    var finalPosition = Math.round(e.moveX / 100) * 100;
    this.style.transform = `translateX(${finalPosition}px)`;
    this.setAttribute('data-position', finalPosition);
  });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.