查看: 4387|回复: 2

在canvas上面的html标签不能响应事件

4 主题	0 好友	52 积分

Rank: 1

电梯直达

楼主

发表于 2016-7-31 23:14:22 |只看该作者 |倒序浏览

my_music在canvas上面刚不能响应事件，在外面就可以，习惯用这种html标签的，不知道不用LButton之类的，有没有什么解决办法还是使用HTML标签。

<script type="text/javascript" src="../../inc/zepto.js"></script>
<style>
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#my_music.on {
-webkit-animation: rotate 2s linear infinite;
}
/*music设置*/
#my_music {
position: absolute;
left: 1rem;
top: 1rem;
width: 2rem;
height: 2rem;
background: url(../../res/music.png) no-repeat;
background-size: 100%;
z-index: 999999;
}
#my_music.off {
opacity: .8;
background: url(../../res/music-off.png) no-repeat;
background-size: 100%;
}
</style>
</head>
<body style="margin:0;padding:0;background-color:#94eaff;width:100%;height:100%;">
<div id="legend">loading</div>
<div id="gamedone" style="position:absolute;top:0;left:0;width:100%;height:100%;display:none"><img src="images/gamedone.jpg" style="width:100%;height:100%;" /></div>
<div id="my_music" class="on"></div>
<script type="text/javascript">
$('#my_music').on('click', function() {
if (flagaudioplay == 0) {
$('#my_music').removeClass('off');
$('#my_music').addClass('on');
flagaudioplay = 1;
} else {
$('#my_music').removeClass('on');
$('#my_music').addClass('off');
flagaudioplay = 0;
}
});
</script>
</body>