详细问题描述
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后 连续点击“+”，“-” 就无效了。
ggggggmt (作者)
恩 我明白你的意思。 但是如果我想开启监听doubletap事件，那我就不可以快速点击加减numberbox了么，这样体验上是不是有些不妥呢。 而且我没有给加减按钮绑定双击事件他还是走的那个通道是不是有一些不合理呢。我的一些个人意见。
2017-07-04 12:03