Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Use mouse to select elements on the screen
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
.gitignore
Makefile
Readme.md
component.json
element-selector.css
index.js

Readme.md

Element Selector

Select DOM elements with the mouse.

Installation

$ component install timoxley/element-selector

Example

var ElementSelector = require('element-selector');
var elementSelector = ElementSelector();

Demo

Options

selector

Only trigger select/highlight events on elements matching this selector. Defaults to body *.

// Only trigger on paragraphs inside #content
var elementSelector = ElementSelector({
  selector: "#content p"
})

selectEvent

Mouse event to trigger selection. Must be one of click, dblclick, mouseup or mousedown. Defaults to click

// Trigger on 'mousedown' instead of 'click'
var elementSelector = ElementSelector({
  selectEvent: "mousedown"
})

selectedClass

// elements will get class "editable" when they are highlighted
var elementSelector = ElementSelector({
  highlightedClass: "editable"
})

highlightedClass

// elements will get class "glow" when they are highlighted
var elementSelector = ElementSelector({
  highlightedClass: "glow"
})

useDefaultStyles

Disable this if you wish to disable the default styles. Adds element-selector class to document.body if true. Defaults to true.

// Disable default styles so you can
// use custom .selected and .highlighted css.
var elementSelector = ElementSelector({
  useDefaultStyles: false
})

Events

Events are fired whenever an element's selected or highlighted status changes. Two arguments are passed to the callback: the element that was highlighted or selected, and the original mouse event that triggered the action (if it exists). The second event argument is supplied if you wish to prevent default actions or otherwise query the triggering event.

Events will be one of the following:

  • select
  • deselect
  • highlight
  • dehighlight

ElementSelector's event API is inherited from component/emitter.

Example

elementSelector.on('select', function(el, event) {
  event.preventDefault()
  console.log('element selected', el)
})

elementSelector.once('dehighlight', function(el) {
  console.log('element dehighlighted', el)
})

API

disable()

Disables the elementSelector instance. No more events will be fired, other than those to deselect/dehighlight the currently selected/highlighted elements.

  elementSelector.disable()

enable()

Reenables a elementSelector instance.

  elementSelector.enable()

Compatibility

Only tested in Chrome. Pull request welcome if you get it working in IE.

License

MIT

Something went wrong with that request. Please try again.