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. 爬虫——BeautifulSoup4解析器

    BeautifulSoup用来解析HTML比较简单,API非常人性化,支持CSS选择器.Python标准库中的HTML解析器,也支持lxml的XML解析器. 其相较与正则而言,使用更加简单. 示例: ...

  2. Windows下安装Mysql5.5.27(社区版)

    所有平台的 MySQL 下载地址为: MySQL 下载. 挑选你需要的 MySQL Community Server 版本及对应的平台. 运行mysql-5.5.27-win32.msi 进入欢迎界面 ...

  3. elasticsearch 5.x 系列之五 数据导入导出

    一.首先给大家发一个福利,分享一个elasticsearch 数据导出工具. esm github 源码地址: https://github.com/medcl/esm 下载编译好的对应elastic ...

  4. echarts实用小技巧,控制字符串长度,限定整数等

    限定横坐标文本字符长度 xAxis : [ axisLabel:{ formatter: function (value) { var maxlength=6; if (value.length> ...

  5. C++代码理解 (强制指针转换)

    #include<iostream> using namespace std; class A { public: A() { a=; b=; c=; f=; } private: int ...

  6. HyperLedger Fabric 1.4 超级账本简介(5.2)

    超级账本(Hyperledger)是推动区块链跨行业应用的开源项目的总称,组织成员可以发起新的区块链项目,加入到超级账本项目(Hyperledger)中,但需要遵循Hyperledger的生命周期.  ...

  7. (数据科学学习手札21)sklearn.datasets常用功能详解

    作为Python中经典的机器学习模块,sklearn围绕着机器学习提供了很多可直接调用的机器学习算法以及很多经典的数据集,本文就对sklearn中专门用来得到已有或自定义数据集的datasets模块进 ...

  8. Java技术——I/O知识学习

    个字节,主要用在处理二进制数据,字节用来与文件打交道,所有文件的储存都是通过字节(byte)的方式,在磁盘上保留的并不是文件的字符而是先把字符编码成字节,再储存这些字节到磁盘.在读取文件(特别是文本文 ...

  9. 算法-----数组------ 数组中的第K个最大元素

    在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2 输出: 5 ...

  10. Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. org/apache/hadoop/hbase/

    Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. org/apache/hadoop/hbase/ ...