touch事件会穿透页面，电脑上chrome模拟不会有，但手机上实际操作会出现 - 简书
touch事件会穿透页面，电脑上chrome模拟不会有，但手机上实际操作会出现
首先~：下面层是a标签(一定要慎用)的还是会穿透，但是div等这些便签的居然不会穿透了...穿透（点穿）是在mobile各种浏览器上发生的常见的bug。可能是由click事件的延迟或者事件冒泡导致。移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug（Zepto的事件都绑在Document上）。常用的解决方案如下：1 使用，这个可以非常完美的解决点穿问题。2 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。移动端的click都是touch之后，才会模拟触发。触发的顺序是touchstarttouchmovetouchendmousedownmousemovemouseenterclick在重叠的区域里，被遮盖的元素绑定click，遮盖的元素绑定touch事件，且touch后遮盖的元素会隐藏的话，就会造成穿透，因为click是在touch之后延迟触发的，浏览器会误认为是在遮盖的元素上触发了click。最好的解决方案是 自己通过touchstart，touchmove，touchend，来模拟一个click（tap）事件，这样除了防止穿透外，事件响应速度也会提高。2013年9月 其他开发语言大版内专家分月排行榜第二2013年8月 其他开发语言大版内专家分月排行榜第二2013年7月 其他开发语言大版内专家分月排行榜第二2011年4月 PHP大版内专家分月排行榜第二
2013年10月 PHP大版内专家分月排行榜第三2013年5月 PHP大版内专家分月排行榜第三2013年4月 其他开发语言大版内专家分月排行榜第三2013年4月 PHP大版内专家分月排行榜第三2013年3月 其他开发语言大版内专家分月排行榜第三2011年5月 PHP大版内专家分月排行榜第三
2014年11月 PHP大版内专家分月排行榜第三2014年6月 PHP大版内专家分月排行榜第三2014年4月 PHP大版内专家分月排行榜第三2014年2月 PHP大版内专家分月排行榜第三2013年11月 PHP大版内专家分月排行榜第三
2013年9月 其他开发语言大版内专家分月排行榜第二2013年8月 其他开发语言大版内专家分月排行榜第二2013年7月 其他开发语言大版内专家分月排行榜第二2011年4月 PHP大版内专家分月排行榜第二
2013年10月 PHP大版内专家分月排行榜第三2013年5月 PHP大版内专家分月排行榜第三2013年4月 其他开发语言大版内专家分月排行榜第三2013年4月 PHP大版内专家分月排行榜第三2013年3月 其他开发语言大版内专家分月排行榜第三2011年5月 PHP大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。&>&如何使用pc浏览器模拟手机端浏览器访问手机版本的页面
如何使用pc浏览器模拟手机端浏览器访问手机版本的页面
上传大小：704B
如何使用pc浏览器模拟手机端浏览器访问手机版本的页面！简单好用！还可以模拟不同的手机系统版本
综合评分：3.5（4位用户评分）
所需积分/C币：
下载个数：38
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var q = $("#form1").serializeArray();
console.log(q);
var res_area_r = $.trim($(".res_area_r").val());
if (res_area_r == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
var mess = $(".res_area_r").val();
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, _username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click",'.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
$(".res_area_r").val($.trim($(".res_area").val()));
评论共有2条
垃圾，文件已损坏！
我只要返还分数
审核通过送C币
TCP-IP详解
创建者：tan3739
网络技术专辑
创建者：kingpeter2009
创建者：gaobaoqiang1983
上传者其他资源上传者专辑
网络技术热门标签
VIP会员动态
下载频道积分规则调整V1710.18
CSDN下载频道积分调整公告V1710.17
开通VIP，海量IT资源任性下载
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
CSDN&VIP年卡&4000万程序员的必选
为了良好体验，不建议使用迅雷下载
如何使用pc浏览器模拟手机端浏览器访问手机版本的页面
会员到期时间：
剩余下载个数：
剩余C币：593
剩余积分：6726
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
(仅够下载10个资源)
全站1200个资源免积分下载
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
全站1200个资源免积分下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
全站1200个资源免积分下载
为了良好体验，不建议使用迅雷下载
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
如何使用pc浏览器模拟手机端浏览器访问手机版本的页面电脑上调试手机网站的几种方法
13436次浏览
手机网站开发，最让人头疼的是网站的兼容问题，不同的手机可能会出现一些莫名的问题。手机网站常见问题及解决方案，我会在后面的文章陆续发表，大家可以看一下。
本文主要讲解电脑上如何调试手机网站：
一、安卓手机的调试：
1、最常见的安卓手机的调试方法是用chrome浏览器调节，既方便有简单。（chrome的版本要在v20.0以上）
按F12,调出代码调试器，如下图
可以让代码调试器左右结构显示
按照下面画红色圈圈的地方进行操作，如下图：
您可以看到有很多设备可以选择
选择Emulate就可以对您的网站进行模拟调试了！
2、安装安卓虚拟机，这种方式可以模拟真机，效果更好一些！
方法如下：
打开上面的地址，注册下载。
安装方法参见：
安装好了以后，有时候不能安装软件，需要破解，下面写写破解步骤！
第一部： 装个ARM转换器 Genymotion-ARM-Translation
第二部： 装个Google Apps ，
把这两个文件拖进虚拟机就可以了！【注意：对应版本要下载好，不然不好用的】
安装好了，运行之后如下图：
二、苹果手机的调试方法：
对于苹果手机的调试，要想在电脑上进行，那必须要用苹果电脑（Mac）了！Mac 版的 Safari 浏览器早就可以连接 iPhone 进行测试了，可以看这里：
也就是说，你将 iPhone 连接 Mac 之后在 iPhone 的 Safari 打开网页，然后再打开 Mac 上的 Safari 浏览器，选择“开发”就可以看到你的 iPhone 上面的网页了，然后会打开 Console 这样的工具。就可以进行各种调试和检查，操作会实时改变在 iPhone 上。
这里如果没有 iPhone 或者觉得 iPhone 连接麻烦，其实也可以使用 Xcode 开发套装中的 iPhone 模拟器。
打开 Xcode 之后，在 “Xcode”-&“Open Developer Tool”-&“iOS Simulator” 即可打开一个 iPhone 模拟器。
这个模拟器几乎跟真实环境一致，还可以设置 iOS 的设备型号等。在模拟器中 Safari 打开的网页，也可以被 Safari 检测到并进行调试,这样就方便多了，不需要来回插拔数据线，同时还可以方便对照设计稿进行细节调整等。
安卓手机的调试，大部分可以用安卓虚拟机或者chrome进行。苹果手机的调试就要用MAC机进行。要是大家还有什么好的调试方法，可以留言交流！当然，真机调试也是一种不错的选择！
相关文章：
关键词搜索