鍍金池/ 問答/HTML5  網(wǎng)絡(luò)營銷  HTML/ 微信內(nèi)置瀏覽器 不支持 onclick 怎么解決？

微信內(nèi)置瀏覽器 不支持 onclick 怎么解決？

項(xiàng)目被迫用的jquery然后做點(diǎn)擊事件，元素是寫死的，不是動態(tài)加載的不存在委托，可就是點(diǎn)擊.on('click')不生效，onclick原生的也不生效，但是在瀏覽器是可以點(diǎn)擊的，這個(gè)微信的兼容性要怎么處理？
頁面結(jié)構(gòu)如下

<!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>
回答
編輯回答
兔寶寶

之前也做過微信內(nèi)訪問的站點(diǎn)，沒有遇到過click不能點(diǎn)擊的情況。就遇到了一個(gè)ios點(diǎn)擊延遲情況，用fastclick處理了。

2017年5月11日 19:48
編輯回答
雨萌萌

我直接寫成答案吧。

微信內(nèi)置瀏覽器需要用 ontouch事件來替代的onclick事件

如果不能用的話我再測試一下。

補(bǔ)充：可用的方法(JSBIN) ,不好意思，鏈接貼錯(cuò)了，JSBIN
在頁面初始化時(shí)，為其添加事件綁定
$("*").bind("click",function(){});
解決方法來自這里

補(bǔ)充：你的問題來自于IP訪問的時(shí)候被微信轉(zhuǎn)碼，使得點(diǎn)擊事件(js代碼)被屏蔽

選擇下方的訪問原網(wǎng)頁即可，最好的方法是用域名訪問

clipboard.png

clipboard.png

2018年8月8日 01:45
編輯回答
怪痞

項(xiàng)目源碼

<%@ 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="沒有數(shù)據(jù)" GridLines="None">
        <Columns>
            <asp:TemplateField >
                <ItemTemplate>
                    <a >
                    <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>
2017年2月6日 04:21