Riz*_*shi 5 jquery html5 canvas jquery-mobile html5-canvas
我有一个HTML5画布,我在其中添加了一个图像,我想调用图像的点击事件,但事件不会触发.我正在写一个HTML代码和jqmobile的一些代码
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.2.1.js"></script>
<script src="jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<canvas id="canvas1" style="position: absolute; left: 0px; top: 0px;" width="1280" height="960">This text is displayed if your browser does not shown.
</canvas>
<script>
$(function () {
var ctx = document.getElementById("canvas1").getContext("2d");
var imgBasket = new Image();
imgBasket.id = "imgBasket";
imgBasket.src = "Basket.png";
ctx.drawImage(imgBasket, 580, 260, 200, 200);
//this jquery mobile event not working in canvas
$("document").on("vclick", "#imgBasket", function () {
alert("Hello");
});
});
</script>
</body>
</html>
现在我明白了你想要实现的目标,你想把一个图像放在画布上,然后使用jquery来查看你点击图像的时间.好吧,可悲的是,它不会像这样工作.画布中的图像不再是dom元素,只有画布本身就是一个.这意味着您可以致电:
$('#canvas').on('click', function() {});
但你不能打电话
$("document").on("click", "#canvasImage", function () {});
因为#canvasImage不存在,即使原始图像是dom节点.如果您的项目没有其他方式,那么fabricjs可能有所帮助: