87,907
社区成员
发帖
与我相关
我的任务
分享ios下click事件要点击两次才有响应
为了实现鼠标放上去显示按钮，写了以下代码
可是在ipad下就不正常了， 要点击两次才出弹出alert。
换成以下的写法就没问题了：
谁知道是怎么回事？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="jquery.1.7.2.js"></script>
</head>
<style>
.title{width: 300px;height:100px;border: 1px solid #ccc;}
.close{width: 50px;height:100px;float:right;background-color: green;display: none;}
.title.msover .close{display: block;}
</style>
<body>
<div class="title">
<div class="close">
</div>
</div>
<script>
$(document).ready(function(){
$(".title").click(function(){
alert("ok");
}).mouseenter(function(e){
$(this).addClass("msover");
}).mouseleave(function(e){
$(this).removeClass("msover");
});
});
</script>
</body>
</html>
可是在ipad下就不正常了， 要点击两次才出弹出alert。
换成以下的写法就没问题了：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="jquery.1.7.2.js"></script>
</head>
<style>
.title{width: 300px;height:100px;border: 1px solid #ccc;}
.close{width: 50px;height:100px;float:right;background-color: green;display: none;}
.title.msover .close{display: block;}
</style>
<body>
<div class="title">
<div class="close">
</div>
</div>
<script>
$(document).ready(function(){
$(".title").click(function(){
alert("ok");
}).mouseenter(function(e){
$(this).addClass("msover");
}).mouseleave(function(e){
$(this).removeClass("msover");
});
});
</script>
</body>
</html>
谁知道是怎么回事？
...全文
请发表友善的回复…
发表回复
wz_307 2014-09-15
- 打赏
- 举报
因为第一种写法的时候 title内是的.close为display:none
第一次点并未触发click, 只触发了over, .close变成了block, 再点就有效了
LZ可以试试以第一种写法, 把title设置一个背景颜色, 再看看区别
tongjun741 2014-09-15
- 打赏
- 举报
不好意思，贴错了，第二种写法是
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="jquery.1.7.2.js"></script>
</head>
<style>
.title{width: 300px;height:100px;border: 1px solid #ccc;}
.close{width: 50px;height:100px;float:right;}
.title.msover .close{background-color: green;}
</style>
<body>
<div class="title">
<div class="close">
</div>
</div>
<script>
$(document).ready(function(){
$(".title").click(function(){
alert("ok");
}).mouseenter(function(e){
$(this).addClass("msover");
}).mouseleave(function(e){
$(this).removeClass("msover");
});
});
</script>
</body>
</html>
张运领 2014-09-15
- 打赏
- 举报
完全没有区别的写法么
这是在逗大家玩么？
XZowie 2014-09-15
- 打赏
- 举报
上下的寫法不是一樣的嗎
