安卓手机微信自带浏览器点击事件失效解决

Posted 陈莺莺呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了安卓手机微信自带浏览器点击事件失效解决相关的知识,希望对你有一定的参考价值。

在移动端做了个导航,长这样

 

 原来结构是用的span

    <span class="menu_icon">
        <img src="img/icon_1.png">
        <p>导航</p>
    </span>

绑定用的是jquery的.click

$(\'.menu_icon\').click(function () {
    $("#nav-phone").stop().animate({right:"0"},500);
})
$(\'.close\').click(function () {
    $("#nav-phone").stop().animate({right:"-50%"},500);
})

然后在移动端,手机自带浏览器都是正常的,但是通过微信自带浏览器打开时,苹果手机是正常的,部分安卓手机出现问题

导航出现失效情况,而且是有时失效,有时不失效

于是各种盲改,网上各种方法都试遍了,最后终于改好了

改了两处地方,不确定是哪一处生效了

1、首先是把span标签换成了a标签,据说是其他标签的点击事件兼容不太好啥的

    <a class="menu_icon">
        <img src="img/icon_1.png">
        <p>导航</p>
    </a>

2、然后是把.click事件改成了 touchstart和click,毕竟在移动端貌似还是touch事件好一点……

    $(\'.menu_icon\').on("click touch",function () {

        $("#nav-phone").stop().animate({right:"0"},500);
    })
    $(\'.close\').on("click touch",function () {
        $("#nav-phone").stop().animate({right:"-50%"},500);
    })

 

以上是关于安卓手机微信自带浏览器点击事件失效解决的主要内容,如果未能解决你的问题,请参考以下文章

解决手机(移动端)点击事件失效问题

解决安卓微信浏览器中location.reload 或者 location.href失效的问题

解决安卓微信浏览器中location.reload 或者 location.href失效的问题

安卓微信浏览器中location.href失效的问题

微信打开链接后如何自动调用手机自带默认浏览器下载APP

安卓手机怎么有两个微信图标?