https://github.com/tuxracer/touchclick

Provides immediate visual feedback on touch for native-feeling web apps
https://github.com/tuxracer/touchclick

fastclick mobile-web obsolete ux

Last synced: about 2 months ago
JSON representation

Provides immediate visual feedback on touch for native-feeling web apps

• Host: GitHub
• URL: https://github.com/tuxracer/touchclick
• Owner: tuxracer
• License: mit
• Archived: true
• Created: 2011-12-24T03:40:15.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2017-05-01T06:32:17.000Z (almost 8 years ago)
• Last Synced: 2024-04-24T15:23:40.355Z (9 months ago)
• Topics: fastclick, mobile-web, obsolete, ux
• Language: JavaScript
• Homepage:
• Size: 79.1 KB
• Stars: 42
• Watchers: 3
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
### ⚠️  Note: This is no longer necessary, nor recommended for the latest versions of mobile browsers. See: https://webkit.org/blog/5610/more-responsive-tapping-on-ios/

touchclick

==================

This is a small jquery plugin that allows you to easily bind to the touch or click events depending on what's available for the given platform. Unlike similar scripts, this also provides *immediate* visual feedback on touch platforms -- just as native apps do.

## Getting Started

1. Include the touchclick.js file on the page after jquery, or require it with [browserify](https://github.com/substack/node-browserify).

2. Bind to the **touchclick** event where you would have otherwise used click or touchend

```javascript

	$(".menu-btn").on("touchclick", function () {

		console.log("अनित्य");

	});

```

3. Define a **.touchactive** style for the given element

```css

	.menu.btn.touchactive {

		color: #eee;

		background-color: #333;

	}

```

4. Disable the default touch overlay so it doesn't interfere with your custom .touchactive style

```css

	* {

            -webkit-touch-callout: none;

            -webkit-tap-highlight-color: rgba(0,0,0,0);

        }

```

5. (Optional) For delegated events add **data-touchclick="true"** to the element you want the touchactive class to be added to.

```html

	
Menu

```


## Traditional Solutions

### Bind to touchend ###

Binding to touchend or using a script such as [fastclick](https://github.com/ftlabs/fastclick) will remove the delay for triggering the event. However, unlike touchclick, they do not provide immediate visual feedback as native apps do.

### Bind to touchend + provide a :hover style ###

Binding to touchend or using [fastclick](https://github.com/ftlabs/fastclick) will remove the delay and provide some visual feedback. However, unlike touchclick and most native apps, when the user removes their finger from the element the :hover style sticks. While subtle, this still leaves web apps with a somewhat laggy feel.

### Rely on tap-highlight-color ###

Some browsers will add a large translucent overlay when items are tapped. However you do not have control over the exact style of an actively pressed element. This typically ends up looking a bit janky.

## License

Copyright (c) 2015, Derek Petersen

Licensed under the MIT license.

http://derek.cloud/