<html>
<head>
<meta charset="GB2312">
<title></title>
<script type="text/javascript">
window.onload=function()
{
var aDiv = document.getElementsByTagName('div')
for (var i=0 i<aDiv.length i++)
{
aDiv[i].onmouseover=function()
{
alert(this.innerHTML)//d出鼠标滑过区域
}
}
}
</script>
</head>
<body>
<div>111</div>
<div>222</div>
<div>333</div>
</body>
</html>
可以用JS脚本检测出鼠标按键。首先在html中的body里面添加鼠标事件，然后根据不同的按键触发后给用户一个提示：
<body onmousedown="ceshi(event)"><script>
function ceshi(event)
{
var Num = event.button
if (Num==2)
{
alert("已按下鼠标右键！")
}
else if(Num==0)
{
alert("已按下鼠标左键！")
}
else if(Num==1)
{
alert("已按下鼠标中键！")
}
else
{
alert("已按下" + Num+ "号键，属于其他功能键。")
}
}
</script>
</body>
实际上,拿canvas2D绘制,只是把image渲染到 canvas(画布上).而实际的事件,就不能像标签那么处理,应该对canvas的事件做处理.实现逻辑是这样:
1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,d起做什么.一般鼠标事件都是判断d起的位置
2,判断有效坐标,在事件中判断坐标位置是否在图片位置,也就是图片在canvas的位置.
ex:
//some code...
canvas.width=400
canvas.height=400
var context2d = canvas.getContext("2d")
var img =new Image()
img.src="xxx/xxx.png"
img.onload=function(){
context2d.drawImage(img,X,Y,WIDTH,HEIGTH)
//X=0,Y=0,W=50,H=50
canvas.addEventListener("mouseup", keyUp, false)
}
function keyUp(evt){
Event_UpX = evt.offsetX
Event_UpY = evt.offsetY
if(Event_UpX>=绘制坐标X&&Event_UpX<=图片宽度){
if(Event_UpY>=绘制坐标Y&&Event_UpY<=图片高度){
//do something
}
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）