both

detects in real time user interaction type (mouse, touch or keyboard) and switches linked events

Because the user may have touch AND a mouse.

Demo

See both in action

Usage

1. Include jQuery:

   <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

2. Include plugin's code:

   <scriptsrc="dist/both.min.js"></script>

3. Call the plugin:

   both();

4. Add your mouse and touch events

That...

// mouse$('.button-blue').on('mouseenter',function(){alert("Mickey");});// touch$('.button-blue').on('touchend',function(){alert("Tacchi");});

... becomes this!

$(window).data('both').store('mouse',$('.button-blue'),'mouseenter',function(e){alert("Mickey");});$(window).data('both').store('touch',$('.button-blue'),'touchend',function(e){alert("Tacchi");});

After that, all event handlers are added/removed according to the interaction type detected. :)

5. Override default values [OPTIONAL]:

   both({// touch screen (true) or not (false)touch: Modernizr.touch,// default: false// data attribute name (or class name prefix)name: null,// default: 'interaction'// data attribute (false) or class (true)class: true,// default: false});

• touch setting allows you to initialize the plugin with a presetted touch device (string)
• name setting allows you to change the default data attribute name by your own (or class prefix name if class is defined as true)
• class setting allows you to use a class instead of data attribute

If you use a device detection solution like device.js or a touch screen detection like [Modernizr(https://github.com/modernizr/modernizr), you can specify the screen type in touch option for not waiting the first tap on touch devices (default: false).

Set name at null or '' and class at true to deactivate class prefix (override useless Modernizr's 'touch' class which detects touch screens, no interaction type).

You can also grab both using bower:

 bower install both --save

Authors

idomusha

License

MIT: http://idomusha.mit-license.org/