微信内置浏览器不支持 onclick 怎么解决？

发布于 2022-09-07 21:08:28 字数 3501 浏览 18 评论 0

项目被迫用的jquery然后做点击事件，元素是写死的，不是动态加载的不存在委托，可就是点击.on('click')不生效，onclick原生的也不生效，但是在浏览器是可以点击的，这个微信的兼容性要怎么处理？
页面结构如下

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演播主页</title>
</head>
<body>
<meta name="viewport"
      content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/>

<!-- <link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./css/production.css"> -->


<div class="production">
    <div class="header">
        <div class="nav">
            <p><img src="./img/qinshi.png" alt=""></p>
        </div>
        <div class="title">
            <p>
       <!--          <span>小灰灰222
                    <img src="./img/perform.png" alt="">
                </span> -->
            </p>
        </div>
    </div>
</div>


<div class="tabBarWrapper">
    <div class="line"></div>
    <div class="tabBar">
        <!--1242 -zuo160  w300-->
        <div class="stance"></div>
        <a href="javascript:;"  class="works">作品</a>
        <div class="center"></div>
        <a href="javascript:;" class="abstract">简介</a>
        <div class="stance"></div>
    </div>
</div>

<!--margin top 0.5rem-->
<div class="containWrapper">

    <div class="contain">
        <div class="banner">
            <!--344  7.96-->
            <div class="jietu">
                <img class="cover" src="" alt="">
                <img src="./img/play.png" alt="">
            </div>
            <div class="slider">
                <p class="bookname">血色黎明</p>
                <p class="studio">演播:<span>哈利波特</span>　作者：<span>哈利波特</span></p>
                <p class="explain">精心精心</p>
            </div>
        </div>
    </div>
</div>


<div class="introduction" style="display: none">
    <div class="container">
        <p>　　小灰灰，灰太狼</p>
        <p>
            　1953年1月成立于北京</p>
    </div>
</div>



<!-- <script src="./js/jquery.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>


    $(function () {

        $('.works').on('click', function () {
            $(this).css({'border-bottom': '0.162rem solid #ce3d3a', 'color': '#ce3d3a'})
            $('.abstract').css({'border': '0px', 'color': '#999999'})
            $('.containWrapper').show()
            $('.introduction').hide()
        })


        $('.abstract').on('click', function () {
            $(this).css({'border-bottom': '0.162rem solid #ce3d3a', 'color': '#ce3d3a'})
            $('.works').css({'border': '0px', 'color': '#999999'})
            $('.containWrapper').hide()
            $('.introduction').show()
        })

        for(var i =0;i<$('.cover').length;i++){
            if($($('.cover')[i]).attr('src')){
                // $($('.cover')[i]).attr('src','./img/jietu1.png')
            }else {
                $($('.cover')[i]).attr('src','./img/jietu1.png')
            }
        }
    })




</script>

</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等风来 2022-09-14 21:08:28

我直接写成答案吧。

微信内置浏览器需要用 ontouch事件来替代的onclick事件

如果不能用的话我再测试一下。

补充：可用的方法~~(JSBIN)~~ ,不好意思，链接贴错了，JSBIN
在页面初始化时，为其添加事件绑定
$("*").bind("click",function(){});
解决方法来自这里

补充：你的问题来自于IP访问的时候被微信转码，使得点击事件(js代码)被屏蔽

选择下方的访问原网页即可，最好的方法是用域名访问

回复收藏 0

人疚 2022-09-14 21:08:28

项目源码

<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="anchor.aspx.cs" Inherits="App_Share_Anchor" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    <meta charset="UTF-8">
    <title>演播主页</title>
</head>
<body>
<meta name="viewport"
      content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/>

<link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./css/add.css">
<!--1080  25份  一份43.2-->

<div class="production">
    <div class="header">
        <div class="nav">
            <p><img src="<%= cover%>" alt="" style="border-radius: 4rem"></p>
        </div>
        <div class="title">
            <p>
                <span><%= name%>
                    <img src="./img/perform.png" alt="">
                </span>
            </p>
        </div>
    </div>
</div>


<div class="tabBarWrapper">
    <div class="line"></div>
    <div class="tabBar">
        <!--1242 -zuo160  w300-->
        <div class="stance"></div>
        <a href="javascript:;" class="works" >作品1</a>
        <div class="center"></div>
        <a href="javascript:;"  class="abstract">简介2</a>
        <div class="stance"></div>
    </div>
</div>

<!--margin top 0.5rem-->
<div class="containWrapper">
    <form runat="server">
    <asp:GridView ID="GridView1" border=0 runat="server" AutoGenerateColumns="False" EnableModelValidation="True"  EmptyDataText="没有数据" GridLines="None">
        <Columns>
            <asp:TemplateField >
                <ItemTemplate>
                    <a href='http://cnquting.com/Player/index.aspx?bookid=<%#Eval("id")%>'>
                    <div class="contain">
                        <div class="banner">
                            <!--344  7.96-->
                            <div class="jietu">
                                <img class="cover" src='<%#Eval("cover")%>' alt="">
                                <img src="./img/play.png" alt="">
                            </div>
                            <div class="slider">
                                <p class="bookname" style="text-align: left"><%#Eval("bookname")%></p>
                                <p class="studio" style="text-align: left">演播:<span><%#Eval("reader")%></span>　作者：<span><%#Eval("bookauthor")%></span> </p>
                                <p class="explain" style="text-align: left"><%#Eval("introduction")%></p>
                            </div>
                        </div>
                    </div>
                    </a>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView> 
    </form>
</div>


<div class="introduction" style="display: none">
    <div class="container">
        <p>　　<%= name%></p>
        <p>　　<%= remark%></p>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<script>
    $(function () {
      //-----------------------------------------
        $("*").bind("click",function(){});
      //-----------------------------------------
        $('.works').on('click ', function () {
            $(this).css({'border-bottom': '0.162rem solid #ce3d3a', 'color': '#ce3d3a'})
            $('.abstract').css({'border': '0px', 'color': '#999999'})
            $('.containWrapper').show()
            $('.introduction').hide()
        })


        $('.abstract').on('click ', function () {
            $(this).css({'border-bottom': '0.162rem solid #ce3d3a', 'color': '#ce3d3a'})
            $('.works').css({'border': '0px', 'color': '#999999'})
            $('.containWrapper').hide()
            $('.introduction').show()
        })

        for(var i =0;i<$('.cover').length;i++){
            if($($('.cover')[i]).attr('src')){
                // $($('.cover')[i]).attr('src','./img/jietu1.png')
            }else {
                $($('.cover')[i]).attr('src','./img/jietu1.png')
            }
        }
    })

   
</script>

</body>
</html>

回复收藏 0