ggggggmt
ggggggmt
  • 发布:2017-07-04 09:56
  • 更新:2017-07-04 11:41
  • 阅读:1508

【报Bug】mui监听了doubletap后numberbox连续点击就无效了

分类:MUI

详细问题描述
mui监听了doubletap后numberbox连续点击就无效了

附件
<!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" />  
    <style>  
        html,  
        body,  
        .mui-content {  
            height: 0px;  
            margin: 0px;  
            background-color: #efeff4;  
        }  
        h5.mui-content-padded {  
            margin-left: 0px !important;  
            margin-top: 20px !important;  
        }  
        .mui-card {  
            margin: 0px;  
        }  
    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">number box(数字输入框)</h1>  
    </header>  
    <div class="mui-content">  
        <div class="mui-content-padded">  
            <h5 class="mui-content-padded">默认</h5>  
            <div class="mui-numbox">  
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                <input class="mui-input-numbox" type="number" />  
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
            </div>  
            <h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5>  
            <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>  
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                <input id="test" class="mui-input-numbox" type="number" value="5" />  
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
            </div>  
            <h5 class="mui-content-padded">设定步长值(步长 10)</h5>  
            <div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'>  
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                <input class="mui-input-numbox" type="number" />  
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
            </div>  
            <h5 class="mui-content-padded">取值操作</h5>  
            <div class="mui-numbox">  
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                <input id="box" class="mui-input-numbox" type="number" />  
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
            </div>  
            <button id="btn" class="mui-btn" style="padding: 7px 12px;">取当前值</button>  
            <h5 class="mui-content-padded">在行内</h5> 购买数量:  
            <div class="mui-numbox">  
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                <input class="mui-input-numbox" type="number" />  
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
            </div>  
            <h5 class="mui-content-padded">在表单中</h5>  
            <div class="mui-card">  
                <form class="mui-input-group">  
                    <div class="mui-input-row">  
                        <label>数字框一</label>  
                        <div class="mui-numbox">  
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                            <input class="mui-input-numbox" type="number" />  
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
                        </div>  
                    </div>  
                    <div class="mui-input-row">  
                        <label>数字框二</label>  
                        <div class="mui-numbox">  
                            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
                            <input class="mui-input-numbox" type="number" />  
                            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
                        </div>  
                    </div>  
                </form>  
            </div>  
            <h5 class="mui-content-padded">通过样式定义大小(220x60)</h5>  
            <div class="mui-numbox" style="width: 220px;height: 60px;">  
                <button class="mui-btn-numbox-minus" type="button">-</button>  
                <input class="mui-input-numbox" type="number" />  
                <button class="mui-btn-numbox-plus" type="button">+</button>  
            </div>                  
            <br/>  
            <br />  
        </div>  
    </div>  
    <script src="../js/mui.min.js"></script>  
    <script>  
        mui.init({  
            // 手势配置  
            gestureConfig: {  
                doubletap: true, // 默认为false  
            }  
        });  
        document.getElementById("btn").addEventListener('tap', function(event) {  
            mui.alert('当前值: ' + document.getElementById("box").value, null, "提示");  
        });  
        var testBox=document.getElementById("test");  
        testBox.addEventListener('change',function(){  
            console.log(testBox.value);  
        });  
    </script>  
</body>  

</html>

这个是你们的mui的例子 加上监听doubletap后 连续点击“+”,“-” 就无效了。

2017-07-04 09:56 负责人:无 分享
已邀请:
Neil_HL

Neil_HL

mui默认是不监听doubletap事件的,当你初始化的时候引入了doubletap,你再双击是就走的是doubletap事件而不是tap事件了,此控件是监听的tap事件,你双击时没执行tap事件自然就无效了。

  • ggggggmt (作者)

    恩 我明白你的意思。 但是如果我想开启监听doubletap事件,那我就不可以快速点击加减numberbox了么,这样体验上是不是有些不妥呢。 而且我没有给加减按钮绑定双击事件他还是走的那个通道是不是有一些不合理呢。我的一些个人意见。

    2017-07-04 12:03

要回复问题请先登录注册