Question

HTML5 给图片对象添加事件

Answer 1

你的意思是用canvas2D绘制是吧?
实际上,拿canvas2D绘制,只是把image渲染到 canvas(画布上).而实际的事件,就不能像标签那么处理,应该对canvas的事件做处理.
实现逻辑是这样:
1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,弹起做什么.一般鼠标事件都是判断弹起的位置
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
}
}
}

Answer 2

比如有个一个这样的图片

<img src="xxxx.jpg" id="pic">

正常绑定事件即可

document.getElementById('pic').onclick=function(){
alert("点击");
}

追问

我的图片是放在html5 的 canvas标签下的，图片是引用的，不是绘制的，图片对象是
var img=new Image(); img.onclick( function(){}); 不好使，怎么办？

追答

错了

var img=new Image();这个是放入的图片对象

你需要获取DOM对象

你看下那个图片是被什么标签包围的 是<img>不？

有没有id 或者name之类可以直接选中的关键字？

比如下面的id是imgId 

document.getElementById('imgId').onclick=function(){
alert("点击");
}