本文实例分享了html5 canvas可拖动省份的中国地图实现方法，供大家参考，具体内容如下 鼠标移动事件根据点击的省份名，获得数据，并实时重绘移动层的省份 #39#eventCanvas#39mousemovefunctionev var mouseX， mouseY ifevlayerX evlayerX==0 mouseX = evlayerX mouseY。

添加鼠标事件处理代码 var myimage = documentgetElementByIdquotmyimagequotif myimageaddEventListener IE9， Chrome， Safari， Opera myimageaddEventListenerquotmousewheelquot， MouseWheelHandler， false Firefox myimageaddEventListenerquotDOMMouseScrollquot， MouseWheelHandler， false IE。

只能获取鼠标对于画布的事件，可以根据点击范围判断点击的内容，然后做相应操作 lt！doctype htmllthtmlltheadltheadltbodyltcanvas id=quotcanvasquot width=quot500quot height=quot500quot style = quotborder1px solid redquotltcanvasltscriptvar rect=x100，y100，w40，h20定义要画的矩形的位置属。

代码中对用户浏览器做判断，实例化能被成功引用的API接口如果用户的浏览器没有提供该API，则使用JS的setTimeout其特性类似于AS的 ENTER_FRAME 事件需要用到的2个JS文件utilsjs 可根据传入的对象判断，鼠标所在对象的相对于左上角的坐标值 unction utilsutilscaptureMouse=functionelement。

ltscript var rect=x100，y100，w40，h20定义要画的矩形的位置属性 var canvas=documentgetElementById#39canvas#39var cxt=canvasgetContext#392d#39cxtfillRectrectx，recty，rectw，recth绘制矩形 canvasonclick=functione给canvas添加点击事件 e=eevent。

touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分在触摸屏幕上的元素，这些事件包括鼠标事件发生的顺序如下1touchstart 2mouseover 3mousemove一次4mousedown 5mouseup 6click 7touchend。

以网页开发为例，我们可以使用JavaScript和HTML5的Canvas元素来实现空间鼠标跟随在HTML5中，Canvas是一个可以用来绘制图形的元素，我们可以通过JavaScript来监听鼠标在Canvas上的移动事件，并在事件处理函数中获取鼠标的当前位置然后，我们可以根据这个位置信息来更新Canvas上的图形元素的位置，使其跟随鼠标移动。

首先，通过 draggable 属性，告知浏览器哪些元素需要实现拖拽功能，该属性有三个可选值truefalseauto，分别表示元素可以被拖拽不能被拖拽由浏览器自行判断接下来，对象拖放事件主要包括dragstart按下鼠标键并开始移动时触发drag在元素拖拽过程中持续触发dragend元素拖拽停止时触发。

用js写鼠标事件，鼠标移入更改img的src内的路径。

比较div的offset和 滚动的距离scroll，当offsetltscroll时，就触发事件参考。

问题根源是你的写法不符合规范从截图来看，你的浏览器是支持HTML5的，也就是说你可以直接在页面写ltaudio标签来播放音频文件，无需创建ltembed标签ltaudio标签有个controls属性，不写的话，是不会出现音乐框的，也就是说能听到声音但在界面是不可见的示例代码如下function openplay va。

提示 所有 HTML DOM 事件，可以查看我们完整的 objeventhtml function 必须指定要事件触发时执行的函数当事件对象会作为第一个参数传入函数 事件对象的类型取决于特定的事件例如， quotclickquot 事件属于 MouseEvent鼠标事件 对象useCapture 可。

lt！DOCTYPE HTMLlthtmlltheadlttitle演示lttitleltstyle type=quottextcssquotltstyleltheadltbodyltdiv id=quotdropDivquot 我可以拖动ltdivltscript type=quottextjavascriptquotfunction dropDivFunElement设置节点的定位为=quotfixedquot获取事件对象函数 方便获取事件。

定义和用法 ondragover 事件在可拖动元素或选取的文本正在拖动到放置目标时触发默认情况下，数据元素不能放置到其他元素中 如果要实现改功能，我们需要防止元素的默认处理方法我们可以通过调用 eventpreventDefault 方法来实现 ondragover 事件拖放是 HTML5 中非常常见的功能 更多信息可以查看我们。

onblur script 元素失去焦点时运行 键盘事件，适用于所有HTML5元素onkeydown script 按下按键时运行 鼠标事件，适用于所有HTML5元素onclick script 单击鼠标时运行 媒介事件，适用于HTML5媒介元素onplay script 媒体开始播放时运行 改写后的文章将每个事件属性列表整理为HTML。

html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件 mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少 mouseup事件发生之后，取消对mousemove以及mouseup事件监听。