https://github.com/gsantiago/jquery-clickout

Handle clickout events with jQuery
https://github.com/gsantiago/jquery-clickout

click clickout event jquery outside plugin

Last synced: about 1 month ago
JSON representation

Handle clickout events with jQuery

• Host: GitHub
• URL: https://github.com/gsantiago/jquery-clickout
• Owner: gsantiago
• Created: 2016-03-30T14:41:00.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-31T20:10:21.000Z (almost 7 years ago)
• Last Synced: 2024-08-10T06:50:39.085Z (5 months ago)
• Topics: click, clickout, event, jquery, outside, plugin
• Language: JavaScript
• Homepage:
• Size: 11.7 KB
• Stars: 23
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# jQuery Clickout

[![Build Status](https://travis-ci.org/gsantiago/jquery-clickout.svg?branch=master)](https://travis-ci.org/gsantiago/jquery-clickout)

[![Build Status](https://saucelabs.com/buildstatus/jquery_clickout)](https://saucelabs.com/beta/builds/5bf8eeee1e7b4f72b620ad07484e82b9)

[![npm version](https://badge.fury.io/js/jquery-clickout.svg)](https://badge.fury.io/js/jquery-clickout)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

[![Code Climate](https://codeclimate.com/github/gsantiago/jquery-clickout/badges/gpa.svg)](https://codeclimate.com/github/gsantiago/jquery-clickout)



  

    

  



jQuery plugin for handle outside clicks. It doesn't stop event propagation

nor prevents default events.

It extends the jQuery Events and adds a new custom event: `clickout`.

You can use it normally with `on` and `off` methods:

```js

// Add a clickout listener

$('button').on('clickout', function (e) {

  console.log('click outside button')

})

// Remove a clickout listener

$('button').off('clickout')

```

The coolest feature is the multiple elements support:

```js

$('.js-button, .js-menu').on('clickout', function (e) {

  console.log('click outside `js-button` and `js-menu`')

  this.addClass('is-hidden') // now both $button and $menu have `is-hidden` class

})

$button.add($menu).on('clickout', function () {

  console.log('click outside `js-button` and `js-menu`')

  this.addClass('is-hidden') // now both $button and $menu have `is-hidden` class

})

```

## Installation

```npm install jquery-clickout --save```

Or just copy `jquery-clickout.min.js` from this repository, in the `dist`

folder.

## Usage

Just use `clickout` like a normal event. Very very easy:

```javascript

$('.my-element').on('clickout', function (e) {

  console.log('Outside element click')

  console.log(this) // jQuery instance of `.my-element`

})

```