[转]dojo/mouse

dojo/mouse

Authors:
Kris Zyp

Project owner:
Kris Zyp

since:
1.7.0

Contents

dojo/mouse is a module that provides extension events for hovering and mouse button utility functions. The module has three properties: enter, leave, and mouseButtons.

Usage

Basic usage requires requirement of the module:

require(["dojo/mouse"], function(mouse){
  // Mouse extension events available
});

require(["dojo/mouse"], function(mouse){ // Mouse extension events available });

To gain utility out of the module, you must utilize one of three extension events:

require(["dojo/mouse", "dojo/on", "dojo/dom"], function(mouse, on, dom){
  on(dom.byId("someid"), mouse.enter, function(evt){
    // handle mouse enter event
  });
});

require(["dojo/mouse", "dojo/on", "dojo/dom"], function(mouse, on, dom){ on(dom.byId("someid"), mouse.enter, function(evt){ // handle mouse enter event }); });

The dojo/mouse::enter event is an extension event for being notified of when the mouse cursor hovers over an element. This is based on Internet Explorer's mouseenter event and differs mouseover because it does not bubble (mouseover and mouseout are widely considered to be broken because they do bubble and generate many meaningless events for every time the mouse enters a different element within the target element). To use enter, we can listen for an event like:

require(["dojo/mouse", "dojo/on", "dojo/dom"], function(mouse, on, dom){
  on(dom.byId("someid"), mouse.enter, function(evt){
    // handle mouse enter event
  });
});

require(["dojo/mouse", "dojo/on", "dojo/dom"], function(mouse, on, dom){ on(dom.byId("someid"), mouse.enter, function(evt){ // handle mouse enter event }); });

leave

The dojo/mouse::leave event is an extension event for being notified of when the mouse cursor stops hovering over an element. This is based on Internet Explorer's mouseleave event and again differs mouseout because it does not bubble. To use leave, we can listen for an event like:

require(["dojo/mouse", "dojo/on", "dojo/dom"], function(mouse, on, dom){
  on(dom.byId("someid"), mouse.leave, function(evt){
    // handle mouse leave event
  });
});

require(["dojo/mouse", "dojo/on", "dojo/dom"], function(mouse, on, dom){ on(dom.byId("someid"), mouse.leave, function(evt){ // handle mouse leave event }); });

mouseButtons

The mouseButtons object has the following properties and methods:

LEFT - The number corresponding to the "button" property value on the event when the left mouse button is clicked.
MIDDLE - The number corresponding to the "button" property value on the event when the middle mouse button is clicked.
RIGHT - The number corresponding to the "button" property value on the event when the right mouse button is clicked.
isLeft(event) - Indicates if the left mouse button was used in the provided event.
isMiddle(event) - Indicates if the middle mouse button was used in the provided event.
isRight(event) - Indicates if the right mouse button was used in the provided event.

It is designed to make interpretation of mouse events easier. For example:

require(["dojo/mouse", "dojo/on", "dojo/dom"], function(mouse, on, dom){
  on(dom.byId("someid"), "click", function(evt){
    if (mouse.isLeft(event)){
      // handle mouse left click
    }else if (mouse.isRight(event)){
      // handle mouse right click
    }
  });
});

require(["dojo/mouse", "dojo/on", "dojo/dom"], function(mouse, on, dom){ on(dom.byId("someid"), "click", function(evt){ if (mouse.isLeft(event)){ // handle mouse left click }else if (mouse.isRight(event)){ // handle mouse right click } }); });

Examples

Run Source Collapse

This example applies a CSS class to a node when the mouse hovers over it.

require(["dojo/mouse", "dojo/dom", "dojo/dom-class", "dojo/on", "dojo/domReady!"],
function(mouse, dom, domClass, on){
  on(dom.byId("hoverNode"), mouse.enter, function(){
    domClass.add("hoverNode", "hoverClass");
  });

  on(dom.byId("hoverNode"), mouse.leave, function(){
    domClass.remove("hoverNode", "hoverClass");
  });
});

require(["dojo/mouse", "dojo/dom", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function(mouse, dom, domClass, on){ on(dom.byId("hoverNode"), mouse.enter, function(){ domClass.add("hoverNode", "hoverClass"); }); on(dom.byId("hoverNode"), mouse.leave, function(){ domClass.remove("hoverNode", "hoverClass"); }); });

<div id="hoverNode">Hover Over Me!</div>

<div id="hoverNode">Hover Over Me!</div>

#hoverNode {  200px; height: 100px; border: 1px solid black; }
.hoverClass { background-color: red; }

#hoverNode { 200px; height: 100px; border: 1px solid black; } .hoverClass { background-color: red; }