图像更改onclick在移动浏览器中不起作用 [英] Image change onclick not work in mobile browser
本文介绍了图像更改onclick在移动浏览器中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个代码,可以在单击图像时更改图像.但是,由于我使用的是mouseup/mousedown,是否有办法使其也可以在移动浏览器中使用?
I have a code that will change the image upon clicking on the image. However, since I am using mouseup/mousedown, is there a way to make it so that it also work in mobile browsers as well?
$(document).ready(function(){
$(".menulink").eq(0).mouseup(function(){
$('#menu1').attr('src', 'http://placehold.it/333/3ef/img/picture2.jpg');
});
$(".menulink").eq(0).mousedown(function(){
$('#menu1').attr('src', 'http://placehold.it/333/fe3/img/picture1.jpg');
});
$(".menulink").eq(1).mouseup(function(){
$('#menu2').attr('src', 'http://placehold.it/333/3ef/img/picture2.jpg');
});
$(".menulink").eq(1).mousedown(function(){
$('#menu2').attr('src', 'http://placehold.it/333/fe3/img/picture1.jpg');
});
});
这是小提琴页
推荐答案
是的,您需要使用touchstart
和touchend
.我还提高了效率,希望您不要介意.
Yes, you need to use touchstart
and touchend
. I also made this slightly more efficient, hope you don't mind.
$(function(){
var $menulink = $('.menulink'),
$menu1 = $('#menu1'),
$menu2 = $('#menu2');
function setSrc($menu,$src){
$menu.src = $src;
}
$menulink.eq(0).on({
'mouseup touchstart':function(){
setSrc($menu1[0],'http://placehold.it/333/3ef/img/picture2.jpg');
},
'mousedown touchend':function(){
setSrc($menu1[0],'http://placehold.it/333/3ef/img/picture1.jpg');
}
});
$menulink.eq(1).on({
'mouseup touchstart':function(){
setSrc($menu2[0],'http://placehold.it/333/3ef/img/picture2.jpg');
},
'mousedown touchend':function(){
setSrc($menu2[0],'http://placehold.it/333/3ef/img/picture1.jpg');
}
});
});
这可能更加有效,如果您不仅拥有这两个功能,那么它尤其有用.
This might be even more efficient, and is especially helpful if you have more than just the two.
$(function(){
var $menulink = $('.menulink');
for(i=$menulink.length;i--;){
var $menu = $('#menu'+(i+1))[0];
$menulink.eq(i).on({
'mouseup touchstart':function(){
$menu.src = 'http://placehold.it/333/3ef/img/picture2.jpg';
},
'mousedown touchend':function(){
$menu.src = 'http://placehold.it/333/3ef/img/picture1.jpg';
}
});
}
});
这只是要考虑的另一种选择.
Just another option to consider.
这篇关于图像更改onclick在移动浏览器中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文