【js学习笔记-094】---------鼠标事件
2014-02-17 11:57
579 查看
除”mouseenter” 和”mouseleave”外的所有鼠标事件都能冒泡。链接和提交按钮的”click”事件都有默认操作且能够阻止。可以取消上下文菜单事件来阻止显示上下文菜单,但一些浏览器有配置选项导致不能取消上下文菜单。
传递给鼠标事件的处理程序的事件对象有clientX和clientY属性。它们指定了鼠标指针相对于包含窗口的坐标。加入窗口的滚动偏移量就可以把鼠标位置转换成文档坐标。
altKey/ctrlKey/metaKey/shiftKey属性指定了当事件发生时是否有各种键盘辅助键按下。
button属性指定当事件发生旱哪个鼠标按键按下,但是,不同浏览器这个属性赋不同的值,所以它很难用。通常contextmenu事件发生的标志是右击。但如上所述,当事件发生时可能无法阻止上下文菜单的显示。
例:拖动文档元素
//drag.js 拖动绝对定位的html元素,它用于mousedown事件处理程序调用随后的mousemove事件将移动元素,mouseup事件终止拖动这些实现能同标准和ie两种事件模型一起工作,它需要用到前几节中介绍的getScrollOffsets()方法
function drag(elementToDrag,event){
//初始鼠标位置,转换为文档坐标
var scroll = getScrollOffsets();
var startX = event.clientX+scroll.x;
var startY = event.clientY+scroll.y;
//文档坐标下,待拖动元素的初始位置
//因为elementToDrag是绝对定位
//所以我们可以假设它的offsetParent就是文档的body元素
var origX =elementToDrag.offsetLeft;
var origY =elementToDarag.offsetTop;
//计算mousedown事件和元素左上角之间的距离
//鼠标移动的距离
var deltaX = startX – origX;
var deltaY =startY – origY;
//注册用于响应接着mousedown事件发生的mousemove和mouseup事件处理程序
if(document.addEventListener){
document.addEventListerner(“mousermove”,moveHandler,true);
document.addEventListerner(“mouseup”,upHandler,true);
}else if(){
//IE事件模型中
//捕获事件是通过调用元素上的setCapture()捕获它们
elementToDrag.setCapture();
elementToDrag.attachEvent(“onmousemove”, moveHandler);
elementToDrag.attachEvent(“onmouseup”, upHandler);
//作为mouseup事件看待鼠标捕获的丢失
elementToDrag.attachEvent(“onlosecapture”, upHandler);
}
//这个事件,不让任何其他元素看到它
if(event.stopPropagation)event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
/**
当元素正在被拖动时,这就是捕获mousemove事件的处理程序
它用于移动这个元素
*/
function moveHandler(e){
if(!e) = window.event;//IE事件模型
//移动这个元素到当前鼠标位置
//通过滚动条的位置和初始单击的偏移量来调整
var scroll =getScrollOffsets();
elementTopDrag.style.left= (e.clientX + scroll.x – deltaX)+”px”;
elementTopDrag.style.top = (e.clientY + scroll.y – deltaY)+”px”;
if(e.stopPropagation)e.stopPropagation();
else e.cancelBubble = true;
}
//这是捕获在拖动结束时发生的最终mouseup事件的处理程序
function upHandler(e){
if(!e) e = window.event;
if(document.removeEventListener){
document.removeEventListener(“mousermove”,moveHandler,true);
document. removeEventListener (“mouseup”,upHandler,true);
}else if (document.detachEvent){
elementToDrag.detachEvent(“onlosecapture”, upHandler);
elementToDrag. detachEvent (“onmouseup”, upHandler);
elementToDrag. detachEvent (“onmousemove”, moveHandler);
elementToDrag.releaseCapture();
}
if(e.stopPropagation)e. stopPropagation();
else e.cancelBubble=true;
}
}
Html:
<div style=”position:absolute;left:100px;width:250px;background-color:white;border:solidblack;”>
<div style=”background-color:gray;border-bottom:dottedblack;padding:3px;font-family:sans-serif;font-weight:bold;”onmousedown=”drag(this.parentNode,event);”>标题栏</div>
<div>
类型 | 说明 |
click | 高级事件,当用户按下并释放鼠标或其他方式“激活”元素时触发 |
contextmenu | 可以取消的事件,当上下文菜单即将出现时触发,当前浏览器在鼠标右击时显示上下文菜单,所以这个事件也能像click事件那样使用 |
dbclick | 双击触发 |
mousedown | 用户按下鼠标按键时触发 |
mouseup | 用户释放鼠标按键时触发 |
mousemove | 用户移动鼠标时触发 |
mouseover | 当鼠标进入元素时触发,relatedTarget(ie:fromeElement)指的是事件来源的元素 |
mouseout | 当鼠标离开元素时触发。relatedTarget(ie:fromeElement)指的是事件来源的元素 |
mouseenter | 类似mouseover 不冒泡,IE引入 Html5将其标准化,但尚未广泛实现 |
mouseleave | 类似mouseout 不冒泡,IE引入 Html5将其标准化,但尚未广泛实现 |
altKey/ctrlKey/metaKey/shiftKey属性指定了当事件发生时是否有各种键盘辅助键按下。
button属性指定当事件发生旱哪个鼠标按键按下,但是,不同浏览器这个属性赋不同的值,所以它很难用。通常contextmenu事件发生的标志是右击。但如上所述,当事件发生时可能无法阻止上下文菜单的显示。
例:拖动文档元素
//drag.js 拖动绝对定位的html元素,它用于mousedown事件处理程序调用随后的mousemove事件将移动元素,mouseup事件终止拖动这些实现能同标准和ie两种事件模型一起工作,它需要用到前几节中介绍的getScrollOffsets()方法
function drag(elementToDrag,event){
//初始鼠标位置,转换为文档坐标
var scroll = getScrollOffsets();
var startX = event.clientX+scroll.x;
var startY = event.clientY+scroll.y;
//文档坐标下,待拖动元素的初始位置
//因为elementToDrag是绝对定位
//所以我们可以假设它的offsetParent就是文档的body元素
var origX =elementToDrag.offsetLeft;
var origY =elementToDarag.offsetTop;
//计算mousedown事件和元素左上角之间的距离
//鼠标移动的距离
var deltaX = startX – origX;
var deltaY =startY – origY;
//注册用于响应接着mousedown事件发生的mousemove和mouseup事件处理程序
if(document.addEventListener){
document.addEventListerner(“mousermove”,moveHandler,true);
document.addEventListerner(“mouseup”,upHandler,true);
}else if(){
//IE事件模型中
//捕获事件是通过调用元素上的setCapture()捕获它们
elementToDrag.setCapture();
elementToDrag.attachEvent(“onmousemove”, moveHandler);
elementToDrag.attachEvent(“onmouseup”, upHandler);
//作为mouseup事件看待鼠标捕获的丢失
elementToDrag.attachEvent(“onlosecapture”, upHandler);
}
//这个事件,不让任何其他元素看到它
if(event.stopPropagation)event.stopPropagation();
else event.cancelBubble = true;
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
/**
当元素正在被拖动时,这就是捕获mousemove事件的处理程序
它用于移动这个元素
*/
function moveHandler(e){
if(!e) = window.event;//IE事件模型
//移动这个元素到当前鼠标位置
//通过滚动条的位置和初始单击的偏移量来调整
var scroll =getScrollOffsets();
elementTopDrag.style.left= (e.clientX + scroll.x – deltaX)+”px”;
elementTopDrag.style.top = (e.clientY + scroll.y – deltaY)+”px”;
if(e.stopPropagation)e.stopPropagation();
else e.cancelBubble = true;
}
//这是捕获在拖动结束时发生的最终mouseup事件的处理程序
function upHandler(e){
if(!e) e = window.event;
if(document.removeEventListener){
document.removeEventListener(“mousermove”,moveHandler,true);
document. removeEventListener (“mouseup”,upHandler,true);
}else if (document.detachEvent){
elementToDrag.detachEvent(“onlosecapture”, upHandler);
elementToDrag. detachEvent (“onmouseup”, upHandler);
elementToDrag. detachEvent (“onmousemove”, moveHandler);
elementToDrag.releaseCapture();
}
if(e.stopPropagation)e. stopPropagation();
else e.cancelBubble=true;
}
}
Html:
<div style=”position:absolute;left:100px;width:250px;background-color:white;border:solidblack;”>
<div style=”background-color:gray;border-bottom:dottedblack;padding:3px;font-family:sans-serif;font-weight:bold;”onmousedown=”drag(this.parentNode,event);”>标题栏</div>
<div>
相关文章推荐
- 从Ext.js examples\index.html 看到代码时的小感想
- 用js编写的一个小方格随椭圆曲线运动的特效例子,非常精典,运行看看吧。。
- ExtJS4.2学习(三)Grid表格
- js 取当前时间的整数
- ExtJS4.2学习(二)Ext统一组件模型
- JS自定义对象
- javascript 事件相关使用总结01
- 《JavaScript网页特效经典300例》
- JSON Example With RESTEasy + Jackson
- 超炫的JavaScript视觉效果
- 留言回复等 插入js代码 原样输出。
- MooTools替代Prototype
- js在html中的加载顺序
- html(js)中事件onsubmit。数据提交…
- JS调用iframe父窗口元素和子窗口元素的方法
- jsp网页搜索结果中实现选中一行使其高亮
- jstack线程说明
- javascript向后台传送相同属性的参数即数组参数
- JS中定义类的方法
- javascript性能提升——动态加载脚本