html鼠标移动触发什么事件

html鼠标移动触发什么事件,第1张

触发onmousemove事件。语法是:

onmousemove="SomeJavaScriptCode"

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

分别是:动作事件就是某个行为发生在特定的时间段。键盘事件就是你对键盘的 *** 作,如敲击某个键,按住某个键不放,按组合快捷键,这些都是键盘事件。鼠标事件是移动时发生的事件,对某控件的此事件进行编程,则当鼠标移过此控件时就会触发此事件,执行其相应代码。超文本标记语言缩写为HTML,标准通用标记语言下的一个应用。HTML是一种标记语言,是网页制作所必备的工具。页面事件指该事件在页面第一次加载时触发,如果页面是从浏览器缓存中读取的,则不会触发。事件是可以被控件识别的 *** 作,如按下确定按钮,选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件。

本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下

鼠标移动事件:根据点击的省份名,获得数据,并实时重绘移动层的省份

$('#eventCanvas').mousemove(function(ev){ 

 var mouseX, mouseY 

 if(ev.layerX || ev.layerX==0){ 

  mouseX = ev.layerX 

  mouseY = ev.layerY 

 }else if(ev.offsetX || ev.offsetX==0){ 

  mouseX = ev.offsetX 

  mouseY = ev.offsetY 

 } 

 if(draging){ 

  if(opts.dragAll){ <span style="font-family: Arial, Helvetica, sans-serif">//拖动整个地图,存在问题,地图画的太慢</span> 

   mapContext.clearRect(0, 0, 1100, 630) 

   for(var i = 0i < allZoneData.lengthi++){ 

    for(var j = 0j < allData[allZoneData[i].name].lengthj++){ //allData是第一次读取数据时放到内存里的变量,它包含了所有数据 

     pubFuns.drawMap(mapContext,allData[allZoneData[i].name][j],mouseX - tempX, mouseY - tempY) 

    } 

   } 

   }else{ 

    moveMapContext.clearRect(0, 0, 1100, 630) 

    pubFuns.drawMoveLayerLine(mouseX - tempX, mouseY - tempY) 

   }  

  } 

})

鼠标抬起事件:设置dragging为false,clear移动层。

$('#eventCanvas').mouseup(function(e){ 

 if(opts.dragAll){  

 }else{ 

  moveMapContext.clearRect(0, 0, 1100, 630) 

 } 

 draging = false 

})

小结:功能、原理都很简单,但能熟悉canvas的一些属性和方法。canvas层是可以重叠到一起的,这样就可以在不同的层画不同的内容,方便维护和管理。

以上就是本文的全部内容,希望对大家的学习有所帮助。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zaji/7279801.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-03
下一篇2023-04-03

发表评论

登录后才能评论

评论列表(0条)

    保存