html5鼠标事件的简单介绍

html5，canvas中某个图标的鼠标事件怎么实现？

1.如果图标是用canvas绘制上去的，就要处理canvas全局的onmousemove事件，判断鼠标的位置是否到了图标上，到了就触发某个函数。

2.图标不要用canvas画，用html的img标签来做，这样就可以直接用它的onmouseover事件。

相关问答

Q1: 新手求助html5 canvas画布的鼠标单击事件，谢谢！

只能获取鼠标对于画布的事件，可以根据点击范围判断点击的内容，然后做相应操作

!doctype html

html

head/head

body

canvas id="canvas" width="500" height="500" style = "border:1px solid red"/canvas

script

var rect={x:100,y:100,w:40,h:20};//定义要画的矩形的位置属性

var canvas=document.getElementById('canvas');

var cxt=canvas.getContext('2d');

cxt.fillRect(rect.x,rect.y,rect.w,rect.h);//绘制矩形

canvas.onclick=function(e){//给canvas添加点击事件

    e=e||event;//获取事件对象

    //获取事件在canvas中发生的位置

    var x=e.clientX-canvas.offsetLeft;

    var y=e.clientY-canvas.offsetTop;

    //如果事件位置在矩形区域中

    if(x=rect.xx=rect.x+rect.wy=rect.yy=rect.y+rect.h){

        window.open('链接地址');//打开指定链接

    }

}

/script

/body

/html

Q2: 如何在HTML5页面中使用鼠标滚轮事件

比较divoffset 滚距离scrolloffsetscroll触发事件 参考：中国//jsfiddle中国/n4pdx/ 或者使用js库比waypoints 中国//imakewebthings中国/waypoints/

Q3: html5拖动元素会触发哪些事件

拖拽发生过程

被拖拽元素

dragstart

按下鼠标键并开始移动鼠标时

drag

在dragstart事件之后，在元素被拖动期间会持续触发该事件

dragend

当拖动停止时，会触发dragend事件

放置目标元素

dragenter

有元素被拖动到放置目标上

dragover

紧随dragenter发生，在被拖动的元素

还在放置目标范围内移动时，会持续触发该事件

dragleave

在元素被拖出放置目标时触发

drop

元素被放到了放置目标中触发

注释：拖拽发生过程：dragstart-drag-dragenter-dragover-dragleave/drop-dragend

Q4: html5中常用的鼠标指向触发事件有哪些

html中有一个

标签，直接给文字添加一个a标签

；

比如：

关于我们

a标签默认的鼠标放上去就是一个手指的样式，或者你也可以用cursor:

pointer;这个给他设置一下，cursor还有其他的属性可以使用

Q5: html5 鼠标事件 怎么优化代码

代码优化主要包括：是不是有冗余的代码，删除掉；是不是有空标签，删除或填充内容；里面是不是有js代码，使用外部调取的方式；是不是使用了大量的style，使用css调取；是不是存在frame框架，使用div；是不是存在table，修改为div。

基本上就这些，但是有一些因为公司业务的需要可能修改不了，尽最大努力就可以了，如果还有问题可以私聊，望采纳。