Salazar
Salazar
  • 发布:2017-07-06 09:39
  • 更新:2017-07-06 12:07
  • 阅读:809

请问一下,自定义对话框,选中其中某个数字会反复打印几次是怎么回事?

分类:MUI

该怎么解决?

<!doctype html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <style type="text/css">  
            /*弹出框属性设置*/  

            #dialog {  
                position: fixed;  
                width: 300px;  
                height: 150px;  
                top: 35%;  
                left: 10%;  
                visibility: hidden;  
                background-color: white;  
                z-index: 100;  
            }  

            .title {  
                font-size: 24px;  
                height: 40px;  
                color: white;  
                background: black;  
                padding-top: 10px;  
                padding-left: 5px;  
            }  

            #zero,  
            #one,  
            #two {  
                height: 20px;  
                padding-left: 5px;  
            }  
        </style>  
    </head>  

    <body>  
        <div class="mui-content">  

            <!--弹出框内容-->  
            <div id="dialog">  
                <p class="title">設置信息</p>  
                <div id="zero">0</div>  
                <hr />  
                <div id="one">1</div>  
                <hr />  
                <div id="two">2</div>  
            </div>  

            <!--按钮-->  
            <button type="button" class="mui-btn mui-btn-blue" onclick="show()">弹出对话框</button>  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  

            });  

            function show() {  
                new ShowDiv();  
            }  

            function ShowDiv() {  
                var _this = this;  

                this.dialog = document.getElementById("dialog");  
                this.newMask = document.createElement("div");  
                        //遮罩层,用来屏蔽灰掉背部界面  
                this.dialog.style.visibility = "visible";  

                // 创建弹出层 遮罩层 等   
                if(!document.getElementById("mask") && 1) {  
                    //mask div      
                    this.newMask.id = "mask";  
                    this.newMask.style.position = "absolute";  
                    this.newMask.style.zIndex = "1";  
                    this.newMask.style.width = "100%";  
                    this.newMask.style.height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) + 100 + "px";  
                    this.newMask.style.top = "0px";  
                    this.newMask.style.left = "0px";  
                    this.newMask.style.background = "gray";  
                    this.newMask.style.filter = "alpha(opacity=80)";  
                    this.newMask.style.opacity = "0.8";  
                    document.body.appendChild(this.newMask);  
                }  
                _this.mask = document.getElementById("mask");  
                _this.mask.style.visibility = "visible";  

                //TODO:有bug,点击后会反复打印  
                var zero = document.getElementById("zero");  
                var one = document.getElementById("one");  
                var two = document.getElementById("two");  
                zero.addEventListener('tap', function() {  
                    mui.toast("点击了0");  
                    _this.CloseDiv(this);  
                });  
                one.addEventListener('tap', function() {  
                    mui.toast("点击了1");  
                    _this.CloseDiv(this);  
                });  
                two.addEventListener('tap', function() {  
                    mui.toast("点击了2");  
                    _this.CloseDiv(this);  
                });       
            }  

            //点击取消按钮关闭模态框  
            ShowDiv.prototype.CloseDiv = function() {  
                this.dialog.style.visibility = "hidden";  
                this.mask.style.visibility = "hidden";  
            }  
        </script>  
    </body>  

</html>
2017-07-06 09:39 负责人:无 分享
已邀请:
chender

chender - 与人为善

把绑定事件的代码放到 if(!document.getElementById("mask") && 1) {}里面去就可以了

  • Salazar (作者)

    谢谢!

    2017-07-06 14:21

chender

chender - 与人为善

因为你每次ShowDiv的时候都绑定事件,所以第一次点击的时候,打印一次,第二次的时候打印两次,第n次的时候打印n次

要回复问题请先登录注册