onmouse事件,onmousewheel事件

鼠标左击确触发了OnMouseMove事件,想知道可能的原因

这个肯定是程序的问题。

你不是说了吗，当这个范围小于100*100像素的时候就默认画出个100*100的虚线框. 我估计就是基于这个条件，当判断鼠标位置时，发现这个范围小于100*100，就用了SetCursorPos等函数调整鼠标位置，结果就产生了mouse move消息。

修正的办法是在释放鼠标时才判断这个范围的大小。

鼠标，焦点事件

onclick是点击事件，on表示当，click表示点击：

ondblclick（双击事件），和点击事件差不多

oncontextmenu 鼠标右键点击事件：

onmouseenter，onmouseover都是表示鼠标进入事件，onmouseleave，onmouseout都是鼠标离开事件，但是onmouseout 比 onmouseleave 先执行，而且如果元素里面存在子元素，鼠标在元素中移动时会反复触发 onmouseover 和 onmouseout，所以推荐使用onmouseenter，与onmouseleave。

onmousemove，?鼠标移动事件：

onmousedown是鼠标按下事件，

onmouseup是?鼠标弹起事件，

这两个事件用法与上面相似，这里不再赘述。

焦点事件：

获得焦点事件：

onfocus

失去焦点事件：

onblur

案例：输入框获取和失去焦点时的变化（动态效果不好截屏）

阻止默认行为：

e .preventDefault()，这里的e是事件函数的形参，表示的是参与动作的事件：

手机端单击和鼠标经过触发什么事件

一、鼠标事件

onmousedown事件，当鼠标左键按下时触发。 如：当鼠标元素boxq1上按下时，改变它的背景颜色。

varbox1 = document.getElementById("box1"); box1.onmousedown=function(){ box1.style.backgroundColor= 'green'; };

2. onmouseup事件，当鼠标左键抬起时触发。如：鼠标按下之前元素box1背景颜色为红色，当按下之后变为绿色，放开之后又变为红色。

varbox1 = document.getElementById("box1"); box1.onmousedown=function(){ box1.style.backgroundColor= 'green'; }; box1.onmouseup=function(){ box1.style.backgroundColor= 'red'; };

3. onmousemove事件，当鼠标在元素上移动时触发。如：鼠标在元素box1上移动时，控制台输出鼠标的位置。

box1.onmousemove =function(e){varx =e.pageX;vary =e.pageY; console.log('鼠标横坐标为：'+x+'******鼠标纵坐标为：'+y); };

4. onmouseenter事件，当鼠标进入元素的瞬间触发，仅在鼠标进入元素时触发。如：鼠标在进入元素box1时，元素背景颜色改为绿色。

它与onmousedown事件区别在于：后者是再按下的瞬间触发，而前者是在进入元素瞬间才触发，也就是说鼠标在元素边界上才触发。

varbox1 = document.getElementById("box1"); box1.onmouseenter=function(){ box1.style.backgroundColor= 'green'; };

5. onmouseleave事件，当鼠标移出元素的瞬间触发，仅在鼠标移出元素时触发，发生在元素边界。如：鼠标在进入元素box1时，背景颜色改为绿色，移出元素后又变为红色。

varbox1 = document.getElementById("box1"); box1.onmouseenter=function(){ box1.style.backgroundColor= 'green'; }; box1.onmouseleave=function(){ box1.style.backgroundColor= 'red'; };

6. onmouseover事件，当鼠标在元素之上的时候触发，只要鼠标留在元素之上就会触发，仅触发一次，不管鼠标是否移动，这是它和onmousemove的区别。如：鼠标在元素box1上时一直在控制台输入数字一。

box1.onmouseover =function(){ console.log(newDate()); };

7. onmouseout事件，当鼠标离开目标元素是触发，效果和原理与mouseleave没有什么区别，只是在Firefox下没有onmouseenter和onmouseleave，只能使用onmouseover和onmouseout；而在IE中便可使用onmouseennter和onmouseleave来代替前两个。

二、手机触摸事件

1. ontouchstart事件，触摸开始事件，当手机屏幕被触摸的瞬间触发。如：当触摸手机的瞬间输出当前触摸的位置坐标。

varbox1 = document.getElementById("box1"); box1.ontouchstart=function(e){vartouch = e.touches[0];varx =Number(touch.clientX);vary =Number(touch.clientY); console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y); };

2. ontouchmove事件，触摸的整个过程触发，当手指在屏幕上移动的时候触发。如：当手指在屏幕上移动的时候获取当前触摸位置。

varbox1 = document.getElementById("box1"); box1.ontouchmove=function(e){vartouch = e.touches[0];varx =Number(touch.clientX);vary =Number(touch.clientY); console.log("当前触摸点的横坐标"+x+"*****当前触摸点的纵坐标"+y); };

3. ontouchend事件，触摸结束的瞬间触发，即当手指离开屏幕时触发。如：当手指离开屏幕时，改变元素的背景颜色。

varbox1 = document.getElementById("box1"); box1.ontouchstart=function(e){vartouch = e.touches[0]; box1.style.backgroundColor= 'green'; };

4. ontouchcancel事件，触摸过程被系统取消时触发，当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

JavaScript onmousemove 事件

定义和用法

onmousemove?事件会在鼠标指针移动时发生。

语法

onmousemove="SomeJavaScriptCode"

参数描述

SomeJavaScriptCode????必需。规定该事件发生时执行的?JavaScript。????

支持该事件的?HTML?标签：

a,?address,?area,?b,?bdo,?big,?blockquote,?body,?button,?

caption,?cite,?code,?dd,?dfn,?div,?dl,?dt,?em,?fieldset,?

form,?h1?to?h6,?hr,?i,?img,?input,?kbd,?label,?legend,?

li,?map,?ol,?p,?pre,?samp,?select,?small,?span,?strong,?

sub,?sup,?table,?tbody,?td,?textarea,?tfoot,?th,?thead,?

tr,?tt,?ul,?var

支持该事件的?JavaScript?对象：

onmousemove?is,?by?default,?not?an?event?of?any?object,?

because?mouse?movement?happens?very?frequently.

提示和注释

注释：每当用户把鼠标移动一个像素，就会发生一个?mousemove?事件。这会耗费系统资源去处理所有这些?mousemove?事件。因此请审慎地使用该事件。

实例:

下面的例子中，当用户把鼠标移动到图像上时，将显示一个对话框：

img?src="/i/eg_mouse2.jpg"?alt="mouse"

onmousemove="alert('您的鼠标刚才经过了图片！')"?/

鼠标事件

1.mousewheel鼠标滚轮事件

**获取当前滚轮的值 **

如果 值 小于 0 滚轮 往下滑

如果 值 大于0 滚轮 往上滑

1. onclick 单击事件

2.ondblclick 双击事件

当给 同一个格子 同时绑定双击和点击事件时

会触发 双击事件 必定会触发两次单击事件

ondblclick = function (){

3.oncontextmenu 鼠标右键

鼠标右键 是一个有默认功能的事件 它可以打开右键菜单

4.鼠标释放事件 onmouseup

鼠标按下不会触发 松开的时候 才会触发

5.鼠标按下事件 onmousedown

1.鼠标移入事件 一共有两种

第一种就是obmouseover 和 onmouseout

（1）鼠标移入 onmouseover

（2）鼠标移出 onmouseout

给父级绑定了事件 子级没有绑定事件

但是 当鼠标移入子级的时候 会触发 父级的事件

这种情况叫做事件冒泡

第二种 鼠标移出事件 onmouseenter 和 onmouseleave

1.鼠标移入 onmouseenter

2.鼠标移出 onmouseleave

鼠标移入移出 有两种写法

共同点： 就是鼠标移入移出的方法、、

不同的：

第一种 onmouseover 和 onmouseout 会触发事件冒泡

第二种 onmouseenter 和 onmouseleave 不会触发事件冒泡

3.鼠标移动事件 onmousemove

box.onmousemove = function (){

consoloe.log('鼠标移动事件')

}

鼠标的坐标 在 鼠标事件的 事件对象中保存

所以我们要获取 鼠标坐标 一般都是通过事件对象 event 获取

所有的鼠标事件 都可以 通过 事件对象来获取 鼠标坐标

但是 通常 我们都是在 鼠标移动事件中获取 和 使用 鼠标坐标