jquery mobile 的问题 10
<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"conte...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("label").on("tap",function(){
alert('a');
});
$("input").on("tap",function(){
alert('a');
});
$(".ui-radio").on("tap",function(){
alert('a');
});
});
</script>
</head>
<body>
<div id="topic">
<input type="radio" name="option" id="a" value="a">
<label for="a">xxxxx</label>
<input type="radio" name="option" id="b" value="b">
<label for="b">xxx</label>
<input type="radio" name="option" id="c" value="c">
<label for="c">xxxxx</label>
<input type="radio" name="option" id="d" value="d">
<label for="d">xxxxx</label>
</div>
</body>
</html>
上面是我的代码，我自己写的 js里面用到 tap 但是 发现不管用，如果换成click可以用，或者不引入jquery mobile 的css库的话 tap也是可以用的....不知道为什么. 展开
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("label").on("tap",function(){
alert('a');
});
$("input").on("tap",function(){
alert('a');
});
$(".ui-radio").on("tap",function(){
alert('a');
});
});
</script>
</head>
<body>
<div id="topic">
<input type="radio" name="option" id="a" value="a">
<label for="a">xxxxx</label>
<input type="radio" name="option" id="b" value="b">
<label for="b">xxx</label>
<input type="radio" name="option" id="c" value="c">
<label for="c">xxxxx</label>
<input type="radio" name="option" id="d" value="d">
<label for="d">xxxxx</label>
</div>
</body>
</html>
上面是我的代码，我自己写的 js里面用到 tap 但是 发现不管用，如果换成click可以用，或者不引入jquery mobile 的css库的话 tap也是可以用的....不知道为什么. 展开
1个回答
展开全部
那是因为jqm 在运行的时候会将对应的标签替换成它自己的一些标签，用谷歌浏览器审查元素可以发现JQM在input标签外会嵌套一层div，有个小细节您的label for里面的值与下面的inputname不匹配哦
如：
<label for="text-basic">Text input:</label>
<input type="text" name="text-basic" id="text-basic" value="">
会被替换成：
<div data-demo-html="true">
<label for="text-basic">Text input:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" name="text-basic" id="text-basic" value=""></div>
</div>
tap对于label和input嵌套这种类型的只能执行一个吧，因为点击lable和input都最终只执行input focus的动作。这2个比较特殊， tap触摸状态要比click状态快300MS左右，手机上有按下 划动 松开 上状态而 input是松开后才触发focus状态，而tap没有松开那个状态，所以您出发不了那个js
touch模块绑定事件touchstart,touchmove和touchend到document上，然后通过计算touch事件触发的时间差，位置差来实现了自定义的tap,swipe等。
tap 当用户点屏幕时触发
taphold 当用户点屏幕且保持触摸超过1秒时触发
swipe 当页面被垂直或者水平拖动时触发。这个事件有其相关联的属性，分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
swipeleft 当页面被拖动到左边方向时触发
5 swiperight 当页面被拖动到右边方向时触发
追问
input 是松开后才触发focus 的话 那为什么tap也能 触发focus状态？ tap不是没有松开状态吗？...不明白。 你上面讲我看不太明白~
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
