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 }); });

enter

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

RunSourceCollapse

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 { width: 200px; height: 100px; border: 1px solid black; }
.hoverClass { background-color: red; }

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

See Also

[转]dojo/mouse的更多相关文章

  1. Events with Dojo(翻译)

    In this tutorial, we will be exploring dojo/on and how Dojo makes it easy to connect to DOM events. ...

  2. dojo事件驱动编程之事件绑定

    什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...

  3. DOJO 八 event dojo/on

    官网教程:Events with Dojo在元素上绑定events,需要引用包dojo/on,通过on方法来实现. <button id="myButton">Clic ...

  4. Dojo实现Tabs页报错(三)

    用Dojo实现tab页的过程中,没有引用“on.js”,但是firebug调试时一直提示如下错误: on.js源码如下: define(["./has!dom-addeventlistene ...

  5. Dojo API中文 Dojo内容模块概览,初学者

    官网:http://dojotoolkit.org/reference-guide/1.10/dojo/index.html#dojo-dojo的翻译 dojo 内容: dojo dojo/dojo ...

  6. Dojo Widget系统(转)

    Dojo 里所有的小部件(Widget)都会直接或间接的继承 dijit._Widget / dijit._WidgetBase dijit._Widget 是 dojo 1.6 和 1.6之前的版本 ...

  7. Dojo Style Guide

    Contents: General Quick Reference Naming Conventions Specific Naming Conventions Files Variables Lay ...

  8. Dojo Javascript 编程规范(转)

    前言 相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript.原文链接: http://dojotoolkit.org/developer/StyleGuide ...

  9. dojo框架笔记

    一.模块定义 1.定义只含值对,没有任何依赖的模块(moudle1.js) define({ color: "black", size: "unisize" } ...

随机推荐

  1. Lucas定理及应用

    额,前两天刚讲了数据结构,今天我来讲讲组合数学中的一种奇妙优化——Lucas 先看这样一个东西 没学过lucas的肯定会说:还不简单?处理逆元,边乘边膜呗 是,可以,但注意一下数据范围 你算这一次,你 ...

  2. Xcode升到7.1插件失效解决方法

    Mac前段时间下载了新的OS系统与Xcode 7.1,然而在使用Xcode 7.1时,发现插件不能用了,瞬间木有爱了,正好交流群里有人问到了插件失效的问题,经过各路大神的神通最终用下面这种方法完美解决 ...

  3. webpack4提升180%编译速度

    前言 对于现在的前端项目而言,编译发布几乎是必需操作,有的编译只需要几秒钟,快如闪电,有的却需要10分钟,甚至更多,慢如蜗牛.特别是线上热修复时,分秒必争,响应速度直接影响了用户体验,用户不会有耐心等 ...

  4. C语言实例解析精粹学习笔记——36(模拟社会关系)

    实例: 设计一个模拟社会关系的数据结构,每个人的信息用结构表示,包含名字.性别和指向父亲.母亲.配偶.子女的指针(只限两个子女).要求编写以下函数: (1)增加一个新人的函数 (2)建立人与人之间关系 ...

  5. [BZOJ1455]罗马游戏(左偏树)

    用并查集和左偏树维护士兵的关系 Code #include <cstdio> #include <algorithm> #define N 1000010 using name ...

  6. 【Leetcode】807. Max Increase to Keep City Skyline

    Description In a 2 dimensional array grid, each value grid[i][j] represents the height of a building ...

  7. ReentrantLock类的hasQueuedPredecessors方法和head节点的含义

    部分启发来源自文章:Java并发编程--Lock PART 1 1.如果h==t成立,h和t均为null或是同一个具体的节点,无后继节点,返回false.2.如果h!=t成立,head.next是否为 ...

  8. nexys4-DDR开发板温度传感器ADT7420U

    1. 用这个板子做个什么功能来学习?板子上有个温度传感器,看下官方是否有例程,板子售价1780元,相当的贵,下面是I2C接口, 看下芯片的引脚图 2. 资料下载地址,得注册账号 https://ref ...

  9. 用gradle编译任意结构的Android项目

    ## 需求 * 继续用`Eclipse`项目的结构,但是使用`gradle`编译,或者说任意的项目结构进行编译. ## 解决方案 1. Android studio的项目结构 1. Android S ...

  10. mysql 处理日期格式

    DATE_FORMAT(createTime,'%Y-%m-%d %H:%i:%s') 对应格式: 2018-12-17 17:33:43 DATE_FORMAT()函数所有格式:   以后有需要在自 ...