tuxracer/touchclick


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

License: MIT

Language: JavaScript


⚠️ 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.

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

	$(".menu-btn").on("touchclick", function () {
		console.log("अनित्य");
	});
  1. Define a .touchactive style for the given element
	.menu.btn.touchactive {
		color: #eee;
		background-color: #333;
	}
  1. Disable the default touch overlay so it doesn't interfere with your custom .touchactive style
	* {
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
  1. (Optional) For delegated events add data-touchclick="true" to the element you want the touchactive class to be added to.
	<div class="menu btn" data-touchclick="true">Menu</div>

Traditional Solutions

Bind to touchend

Binding to touchend or using a script such as 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 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.

@tuxracer@mastodon.social

Bitcoin (BTC) 1BkpN3NKNRvs1ByGRYJDMFJ337xPDWVEu

Ethereum (ETH) 0x08abDAc4bcd857741588680c829D8BfeE29996d1

Ripple (XRP) r9qTzTE9sTi2xDkP1goNYnQYXz1hKKKVXz

Project Statistics

Sourcerank 5
Repository Size 395 KB
Stars 47
Forks 14
Watchers 4
Open issues 1
Dependencies 14
Contributors 3
Tags 11
Created
Last updated
Last pushed

Top Contributors See all

Derek Petersen Hendrik Kleinwaechter Robert

Packages Referencing this Repo

touchclick
(Obsolete) Provide immediate native-like visual feedback on touch
Latest release 3.1.2 - Published - 47 stars
touchclick
(Obsolete) Provide immediate native-like visual feedback on touch
Latest release 3.1.2 - Updated - 47 stars

Recent Tags See all

3.1.2 May 01, 2017
3.1.1 August 31, 2015
3.1.0 February 04, 2014
3.0.1 January 21, 2014
3.0.0 January 10, 2014
2.0.0 January 10, 2014
1.1.4 October 29, 2013
1.1.3 October 23, 2013
1.1.2 September 28, 2013
1.1.1 September 27, 2013
1.1.0 September 06, 2013

Something wrong with this page? Make a suggestion

Last synced: 2017-05-01 05:21:18 UTC

Login to resync this repository