div，监听tap点击动作总是失效，怎么办

分类：MUI

mui

<div class="bgImg"><img src="../images/北京封面图.png" width="100%" height="140px">  
   <div id="headImg"><img id="head-img1" src="../images/头像.png">  
      <div id="name">姓名</div>  
  </div>  
</div>  
<div id="releaseMsgdiv">发布通知</span></div>  
<div id="localfilesdiv">本地文件</span></div>

监听方法：

mui.plusReady(function() {  
    document.getElementById("headImg").addEventListener('tap', function(e) {  
    mui.openWindow({url: "changeHeadImg.html"});    //这个div监听总是失效     
    });  
    document.getElementById("releaseMsgdiv").addEventListener('tap', function(e) {  
    mui.openWindow({url: "releaseMsg.html"});//这个div监听正常          
    });  
    document.getElementById("localfilesdiv").addEventListener('tap', function(e) {  
    mui.openWindow({url: "localfiles.html"})；//这个div监听正常          
    })    
});  
//____________求大神解决____________。O(∩_∩)O谢谢

2018-01-25 09:17 负责人:无分享

3 个回复

王者地带 - 5+混合APP开发教程网 | http://www.html5-app.com | 咨询QQ: 2564034335

你确定是监听失效还是页面打开失效  

 document.getElementById("headImg").addEventListener('tap', function(e)   
{  
     console.log("headImg");//打印看看是不是每次都可以  

     mui.openWindow({url: "changeHeadImg.html"});  //这个div监听总是失效     

 });

下雨咯 (作者)

这个我试过了，我log的是“1”，结果就是总是点击动作无效，（说这个监听器的“成功率”不行，应该表达的更准确）我把该页源码发你一下吧

2018-01-25 17:27
下雨咯 (作者)

楼下

2018-01-25 17:40

下雨咯 (作者) - 谢绝私聊

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>我</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <!--标准mui.css-->  
        <link rel="stylesheet" href="../css/mui.min.css">  
        <!--App自定义的css-->  
        <link rel="stylesheet" type="text/css" href="../css/app.css" />  
        <link href="../css/mui.picker.css" rel="stylesheet" />  
        <link href="../css/mui.poppicker.css" rel="stylesheet" />  
        <style>  
            html,  
            body {  
                background-color: #FBFBFB;  
            }  
            .mui-content {  
                background-color: #FBFBFB;  
            }  
            .title {  
                margin: 10px 25px 5px;  
                color: black;  
                font-size: 14px;  
            }                         
            .bgImg {  
                width: 100%;  
                height: 140px;  
                position: relative;  
            }  
            #headImg {  
                position: absolute;  
                width: 80px;  
                height: 80px;  
                margin: auto;  
                top: 140px;  
                left: 0;  
                bottom: 0;  
                right: 0;  
                text-align: center;  
                border-radius: 50%  
            }  

            #nurseName {  
                /*position: absolute;*/  
                margin-top: 0px;  
                color: black;  
                font-size: 16px;  
                width: 100%;   
                height: 20px;  
                /*top: 130px;*/  
                /*left: 0;*/  
                /*right: 0;*/  
                text-align: center;  
                color: #36AB60;  
            }  
            #divform{  
                position: absolute;   
                width: 100%;  
                height: 50px;  
                z-index: 997;   
            }  
            #localfilesdiv{  
                position: absolute;  
                top: 30px;  
                right: 25px;   
                z-index: 999;  
            }  
            #releaseMsgdiv{  
                position: absolute;  
                top: 30px;  
                left: 25px;   
                z-index: 999;  
            }             
            li {  
                height: 44px;  
            }  

            .mui-icon-plus:before {  
                color: white;  
            }  

            #cellicon {  
                display: inline;  
                float: left;  
                width: 20px;  
                height: 20px;  
            }  

            #nurseLoc {  
                display: inline;  
                margin-left: 15px;  
                font-size: 16px;  
            }  

            #cellicon1 {  
                display: inline;  
                float: left;  
                width: 24px;  
                height: 22px;  
                margin-left: -1px;  
            }  
            .side{  
                /*text-decoration:underline;*/   
                margin-left: 22px;  
                font-size: 13px;  
            }  
            #cellName {  
                display: inline;  
                margin-left: 15px;  
                font-size: 14px;  
                color: #323232;  
            }  

            .mui-table-view-cell:after {  
                background-color: #FBFBFB;  
            }  
            #head-img1{  
                border:2px solid white;  
                border-radius: 50%;  
            }  
        </style>  
    </head>  

    <body>  
        <div class="mui-content">  
            <div class="bgImg">  
                <img src="../images/bg-login.png" width="100%" height="140px">  
                <div id="headImg">  
                    <img id="head-img1" src="../images/head.png" width="80px" height="80px">  
                <div id="nurseName">未登录</div>  
                </div>  
            </div>  
            <div id="divform">  
                <div id="releaseMsgdiv">  
                    <div style="position: absolute;top: 2px;left: 0px; z-index: 999;">  
                        <img src="../images/write.png" width="17px" height="17px">  
                    </div>  
                    <span class="side">发布通知</span>  
                </div>  
                <div id="localfilesdiv">  
                    <div style="position: absolute;top: 1px;left: 0px; z-index: 999;">  
                        <img src="../images/download.png" width="18px" height="18px">  
                    </div>  
                    <span class="side">本地文件</span>  
                </div>  
            </div>  
        </div>  
        <script src="../js/mui.min.js "></script>  
        <script type="text/javascript">  

            mui.init({  
            });  
            mui.plusReady(function() {  
                document.getElementById("headImg").addEventListener('tap', function(e){  
                    mui.openWindow({  
                        url: "releaseMsg.html",  
                        id: "",  
                        extras: {}  
                    });       
                console.log("你点了头像");  
                mui.toast("您点击了头像");  
                //changeHeadImg();  
                });  
            document.getElementById("releaseMsgdiv").addEventListener('tap', function(e) {  
                console.log("你点了发布通知");  
                mui.toast("发布通知");  

                                mui.openWindow({  
                                    url: "releaseMsg.html",  
                                    id: "",  
                                    extras: {}  
                                });           
            });  
            document.getElementById("localfilesdiv").addEventListener('tap', function(e) {  
                console.log("你点了本地文件");  
                mui.toast("本地文件");  

                                mui.openWindow({  
                                    url: "localfiles.html",  
                                    id: "",  
                                    extras: {}  
                                });           
            });  
            function changeHeadImg() {  
                                mui.openWindow({  
                                    url: "changeHeadImg.html",  
                                    id: "",  
                                    extras: {}  
                                });       
            }             
        });  

        </script>  
    </body>  

</html>

王者地带 - 5+混合APP开发教程网 | http://www.html5-app.com | 咨询QQ: 2564034335

 在这个样式加上z-index 这个，你其他两个绝对定z-index给的太高了，其实你两三层，用一个数字就可以，例如：z-index: 2;  z-index:3 ,我看你都是用大数值999，又刚好 #headImg这个没有，所以它在底层只留一点位置，所以才会有时点不中  
 #headImg  
 {  
       z-index:9999;  
}

下雨咯 (作者)

就是这样的！感谢

2018-01-26 09:57

该问题目前已经被锁定, 无法添加新回复

div，监听tap点击动作总是失效，怎么办

3 个回复

公告

相关问题

div，监听tap点击动作总是失效，怎么办

与内容相关的链接

3 个回复

公告

相关问题