hibop / mobile-events

📱Make mobile events user-friendly.👋

mt-events

Handle mobile events on the web easily

Preview

You can try it on your phone now here -> http://mtevents.jerryonlyzrj.com/test.html

Features

• Supports widely-used mobile terminal events such as double tap and long tap, in addition to native web events like clicking. With mt-events, you could listen for these mobile/web events just the way you would using the native addEventListener web API or JQuery.
• Allows for event delegation. All you need to do is adding an extra argument like $.on in JQuery.
• The whole library is only 1.8KB after gzip. We will deploy the script to our CDN as soon as possible.
• Use WeakMap to manage the reference of HTMLElement and its event handler, so there is no need for you to remove the event handler after you remove a HTMLElement, the weak reference will be recycled by GC.

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Usage

url

Include the (minified) mtevents.min.js script file in your HTML:

<script src="http://mtevents.jerryonlyzrj.com/mtevents.min.js"></script>

Then use the mtEvents function directly in your JavaScript code:

mtEvents('#bindTarget', 'click', e => console.log('click'))

npm

The following is an example of using MtEvents like a Node.js module, inside a Vue file for instance.

Install the mt-events package with npm:

npm i mt-events

Require and use it like such:

//test.vue
<script>
const mtEvents = require('mt-events')
export default {
    ...,
    mounted(){
        mtEvents('#bindTarget', 'click', e => console.log('click'))
    }
}
</script>

Tests

This project comes with unit tests. You can run the test with:

npm t

A coverage file is included in the test folder.

Docs

Users

See the user API documentations below for your reference ⬇️

中文文档

Documentation

Developers

Run the command below to create the developer sub-directory inside the docs folder:

npm run docs