javascript - 移动端tap咋会触发点透的 两个事件都是tap
本文介绍了javascript - 移动端tap咋会触发点透的 两个事件都是tap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
body{
background-color: #F0EFF5;
}
.list{
padding: 0 10px;
}
#Top{
position: relative;
height: 50px;
text-align: center;
line-height: 50px;
background-color: white;
}
#relation{
position: relative;
font-size: 15px;
color: black;
font-weight: bold;
font-family:"微软雅黑";
}
#relation:before{
position: absolute;
left: 20px;
top: 50%;
display: block;
content: '';
width: .8em;
height: .8em;
border-left: .2rem solid #000000;
border-bottom: .2rem solid #000000;
-webkit-transform: translateY(-50%) scaleY(0.7) rotateZ(45deg);
-moz-transform: translateY(-50%) scaleY(0.7) rotateZ(45deg);
-ms-transform: translateY(-50%) scaleY(0.7) rotateZ(45deg);
}
.rform_div{
margin:10px 0;
}
.message{
display: inline-block;
height: 30px;
width: 25%;
text-align: center;
line-height: 30px;
border-radius: 6px;
background-color: white;
margin-right:5%;
font-size: 15px;
}
/*点击变色*/
.clickChange{
border:1px solid red ;
color: red;
}
.content_title{
font-size:15px ;
margin-bottom: 10px;
margin-left: 3%;
}
.common{
width: 100%;
height: 50px;
line-height: 50px;
background-color: white;
padding-left:20px;
box-sizing: border-box;
font-size: 15px;
}
.radius{
border-radius: 6px;
}
.one{
border-radius: 6px 6px 0 0 ;
border-bottom: 1px solid #F0EFF5;
}
.three{
border-radius: 0 0 6px 6px;
border-top: 1px solid #F0EFF5;
}
.more {
position: relative;
}
.more:after {
position: absolute;
right: 20px;
top: 50%;
display: block;
content: '';
width: .6em;
height: .6em;
border-left: .04rem solid #000000;
border-bottom: .04rem solid #000000;
-webkit-transform: translateY(-50%) scaleY(0.7) rotateZ(-135deg);
-moz-transform: translateY(-50%) scaleY(0.7) rotateZ(-135deg);
-ms-transform: translateY(-50%) scaleY(0.7) rotateZ(-135deg);
}
.more-after{
font-size: 15px;
position: absolute;
right:40px ;
}
/*处理下拉框*/
#reply{
position: relative;
}
ul{
position: absolute;
z-index: 99;
/*width: 30%;*/
top: 100%;
right: 10%;
list-style: none;
background: white;
display: none;
border: 1px solid #9CBEF5;
}
li{
line-height: 24px;
text-indent: 10px;
}
.liHover{
background-color: red;
}
.btn{
border:none;
outline: none;
background-color:#00AAEE ;
width: 100%;
height: 50px;
border-radius: 6px;
color: white;
}
/*去掉input textare 的默认样式，进行重新定义*/
input,textarea{
outline: none;
border: none;
}
input{
margin-left: 15%;
}
#text{
margin-right: 10px;
}
textarea{
width: 100%;
height: 100px;
resize:none;
border-radius: 6px;
padding: 5px 0 0 10px;
}
</style>
</head>
<body>
<div id="content">
<div id="Top">
<div id="relation">
意见反馈
</div>
</div>
<dl class="list">
<dd>
<div class="rform_div" id="reason">
<div class="content_title">留言类型</div>
<span class="message clickChange"><img src=""/>咨询</span>
<span class="message"><img src=""/>投诉</span>
<span class="message"><img src=""/>建议</span>
</div>
</dd>
<dd>
<div class="common radius">
姓名
<input type="text" placeholder="请输入"/>
</div>
</dd>
<dd>
<div class="rform_div" id="sex">
<div class="content_title">称谓</div>
<span class="message clickChange"><img src=""/>先生</span>
<span class="message"><img src=""/>女士</span>
</div>
</dd>
<dd>
<div class="more more-weak common one">
地区
<span class="more-after">
请选择
</span>
</div>
</dd>
<dd>
<div class="more more-weak common" id="reply">
回复方式
<span class="more-after">
请选择
</span>
<ul>
</ul>
</div>
</dd>
<dd>
<div class="more more-weak common three" id="bank">
业务类型
<span class="more-after">
请选择
</span>
<ul>
</ul>
</div>
</dd>
<dd>
<div class="rform_div" id="text">
<div class="content_title">内容</div>
<textarea placeholder="写下您的宝贵意见"></textarea>
</div>
</dd>
<dd>
<div class="rform_div ">
<button type="button" class="btn">提交</button>
</div>
</dd>
</dl>
</div>
<script src="http://res.51wan.com/global/js/jquery.min.js"></script>
<script src="http://res.51wan.com/global/js/jquery.mobile.touch.min.js"></script>
<script type="text/javascript">
$(function(){
$("#reason span").tap(function(){
$(this).addClass("clickChange").siblings().removeClass("clickChange")
});
$("#sex span").tap(function(){
$(this).addClass("clickChange").siblings().removeClass("clickChange")
});
var arr1 = ["短信回复","电子邮件回复","无需回复"];
var arr2 = ["个人金融业务","电子银行业务","企业金融业务","信用卡业务"]
var flag1 = 0;
var flag2 = 0;
// $(document).tap(function(){
// $("#reply ul").hide();
// $("#bank ul").hide();
// })
//移动端实现hover 效果
function Hover(element){
element.addEventListener("touchstart" ,function(){
$(this).addClass("liHover")
})
element.addEventListener("touchend" ,function(){
$(this).removeClass("liHover")
})
}
//回复的逻辑结构
$("#reply").tap(function(ev){
var ev = window.event || event;
ev.stopPropagation()
$("#reply ul li").show();
$("#bank ul").hide();
if($("#reply ul").is(":hidden")){
$("#reply ul").show();
if(flag1 == 0){
flag1 = 1;
$.each(arr1,function(index, item){
$("#reply ul").append("<li>"+item+"</li>");
})
var reply = document.getElementById("reply")
var allLi = reply.getElementsByTagName("li")
//循环遍历加监听
for(var i= 0;i<allLi.length;i++){
Hover(allLi[i])
}
$("#reply ul li").tap(function(){
$(this).parent().siblings(".more-after").html($(this).html())
$("#reply ul li").hide();
})
}else{
$("#reply ul li").tap(function(){
$(this).parent().siblings(".more-after").html($(this).html())
$("#reply ul li").hide();
})
return;
}
}else{
$("#reply ul").hide();
}
})
//业务类型的逻辑结构
$("#bank").tap(function(ev){
var ev = window.event || event;
ev.stopPropagation();
$("#bank ul li").show();
$("#reply ul").hide();
if($("#bank ul").is(":hidden")){
$("#bank ul").show();
if(flag2 == 0){
flag2 = 1;
$.each(arr2,function(index, item){
$("#bank ul").append("<li>"+item+"</li>");
})
$("#bank ul li").tap(function(){
$(this).parent().siblings(".more-after").html($(this).html())
$("#bank ul li").hide();
})
}else{
$("#bank ul li").tap(function(){
$(this).parent().siblings(".more-after").html($(this).html())
$("#bank ul li").hide();
})
return;
}
}else{
$("#bank ul").hide();
}
})
//点击提交，收集数据
$(".btn").tap(function(){
var messageType = $("#reason .clickChange").text()
var username = $(".radius input").val()
var sex = $("#sex .clickChange").text()
var reply = $("#reply span").text()
var businesstype = $("#bank span").text()
var content = $("#text textarea").val()
var param ={
messageType:messageType,
username:username,
sex:sex,
region:"",
reply:reply,
businesstype:businesstype,
content:content
}
})
})
</script>
</body>
</html>
点击回复方式 会触发下面业务类型的tap事件 好奇怪
解决方案
tap又不是原生事件咯~
个人还是推荐直接上fastclick库（如果需要同时兼容桌面端和移动端的话）；或者如果只做移动端的话，直接用touchstart就行了。
这篇关于javascript - 移动端tap咋会触发点透的 两个事件都是tap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
