js鼠标,键盘,坐标轴事件
鼠标按下事件,左键是0,滑轮是1,右键2
document.getElementById("box").onmousedown =function(e)
{
if (e.button==0)
{
this.style.background="#c00";
}
else if(e.button==1)
{
this.style.background="#0c0";
}
else if(e.button==2)
{
this.style.background="#00c";
}
else
{
alert("你按下了"+e.button+"号键");
}
console.log(e.type);
console.log(e.screenX);
console.log(e.clientX);
console.log(e.offsetX);
}
键盘ctrl,alt
document.onkeydown=function(e)
{
if (e.ctrlKey)
{
alert("你按下了ctrl键");
} else if (e.altKey)
{
alert("你按下了alt键");
}
else if (e.shiftKey)
{
alert("你按下了shift键");
}
else if (e.ctrlKey &&altKey &&shiftKey)
{
alert("你按下了三个键");
}
console.log(e.type);
}
坐标轴时间
var textbox=document.getElementById("textbox");
var val='';
document.getElementById("box").onmousedown=function(e)
{
e=window.event || e;
val="e.screenX: "+e.screenX+
"\ne.screenY: "+e.screenY+
"\nclientX: "+e.clientX+ //clientX支持所有浏览器
"\nclientY: "+e.clientY+ //
"\ne.X: "+e.X+
"\ne.Y: "+e.Y+
"\npageX: "+e.pageX+
"\npageY: "+e.pageY+
"\noffsetX: "+e.offsetX+
"\noffsetY: "+e.offsetY+
"\noffsetX: "+(e.clientX-this.offsetLeft);
textbox.value=val;
//offset火狐不支持
//可以用此方法
//e.clientX-offsetleft
}
//html代码
<div id="box"> </div>
<textarea id="textbox" style="display:block;margin:50px auto;width:400px;height:200px;"></textarea>



js鼠标,键盘,坐标轴事件的更多相关文章
- js(鼠标键盘拖动事件)
拖动事件是h5(HTML5的) 1:draggable(true) 2:拖动源 ondragstart ,ondragend 3:目的地 ondraglenter,ondragover,ondragl ...
- JS 鼠标键盘HTML事件
- Atitit.js的键盘按键事件捆绑and事件调度
Atitit.js的键盘按键事件捆绑and事件调度 1. Best的方法还是 objEvtMap[ id+evt ]=function(evt,element) 2. Event bind funct ...
- js鼠标划过事件
js鼠标划过事件一般有两对 onmouseover/onmouseout onmouseenter/onmouseleave 区别: 1.onmouseover/onmouseout 鼠标经过自身会触 ...
- 几个常用的JS鼠标键盘事件例子
首先普及一下鼠标左右键值的相关方法: 1.event.x 鼠标横轴 2.event.y 鼠标纵轴 3.event.keycode 键盘值 4.events.button==0 默认.没有按任何按 ...
- js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
- Dojo初探之4:dojo的event(鼠标/键盘)事件绑定操作(基于dojo1.11.2版本)
前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...
- jquery鼠标键盘悬停事件,形变动画和淡入淡出
鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- js鼠标滑轮滚动事件绑定(兼容主流浏览器)
/** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...
- js监控键盘大小写事件
JavaScript键盘事件侦听 在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事 件的执行顺序如 ...
随机推荐
- 最全的Android源码目录结构详解
Android 2.1|-- Makefile|-- bionic (bionic C库)|-- bootable (启动引 ...
- C#中abstract和virtual区别
在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...
- eclipse常用插件安装
打开资源文件所在目录 EasyExplorer 下载:http://sourceforge.net/projects/easystruts/ 直接拷贝到%ECLIPSE_HOME%\plugins 或 ...
- 在Java中使用Memcached(转)
memcache的Java客户端调用,在网上还是有些少,很多都是php的.如何要想用Java调用memcache的服务,首先要有客户端的支持,我们先下载一个客户端吧.下载地址:https://gith ...
- Maven本地安装JAR包组件
http://www.mkyong.com/maven/how-to-add-oracle-jdbc-driver-in-your-maven-local-repository/ mvn instal ...
- Camel、Pastal、匈牙利标记法
原来我一直用的是Camel标记法……收藏学习了. */ Camel标记法采用首字母小写,接下来的单词都以大写字母开头的方法,如myName. Pastal标记法采用首字母大写, ...
- PO_PO系列 - 询价报价单管理分析(案例)
2014-07-01 Created By BaoXinjian
- NeHe OpenGL教程 第十七课:2D图像文字
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- SharedPreferences实现自动登录记住用户名密码
最近Android项目需要一个自动登录功能,完成之后,特总结一下,此功能依靠SharedPreferences进行实现. SharedPreferences简介 SharedPreferences ...
- Maven内置隐式变量(转)
Maven提供了三个隐式的变量可以用来访问环境变量,POM信息,和Maven Settings env env变量,暴露了你操作系统或者shell的环境变量.便 如在Maven POM中一个对${en ...