jQuery Mobile：调试触摸事件，data-position="fixed" 的问题答案

【问题标题】：jQuery Mobile: Debugging Touch events, issue with data-position="fixed"jQuery Mobile：调试触摸事件，data-position="fixed" 的问题
【发布时间】：2013-05-10 21:50:09
【问题描述】：

下午，

我的问题是关于如何在使用 jQuery Mobile 时调试触摸事件。我正在使用带有固定标题 (data-position="fixed") 的 jQuery Mobile 开发移动网站（此处为临时测试服务器：http://afonsogomes.com/id），用户可以点击以隐藏或点击以显示。

我不知道我做错了什么，但网站突然失去了这种能力。

搜索 jquery 移动演示和文档已经尝试了一些方法，例如 data-tap-toggle="true" 但没有任何成功。萤火虫的控制台也没有给我任何红灯。

解决这个问题对我的问题来说是次要的，但它也会很棒。我很想知道如何调试触摸事件是否被触发。

提前谢谢大家

【问题讨论】：

您可以将事件记录到控制台以确保它正在触发。是你做的吗？另外，显示有问题的代码，或者这基本上看起来像，'我不想付钱给任何人来修复我不明白的东西，所以希望你们能给我 c0dez'
好吧...这是我第一个使用 jQuery mobile 的移动网站，我什至不知道如果我使用 data-position="fixed" 选项，框架会将点击设置为隐藏/显示事情。
兄弟就是这样。我没有要求任何人修复我的代码，因为我什至不知道这个事件是在哪里触发的。 Firebug 在代码中没有给我任何错误！这个东西刚刚停止工作，我想知道我可以采取哪些步骤来调试它
有问题的标题是 Innodouro 的标题。当我单击此标题时，没有任何反应。如果我单击three horizontal lines，我们会从左侧看到一个面板。如果我单击 x，面板将关闭。如果单击右侧的search icon，则会打开右侧的面板，如果单击 x，则会关闭面板。我错过了什么。我正在 iPad 上进行测试，请注意。
console.log($.mobile.fixedToolbars.setTouchToggleEnabled())。返回什么？

标签： javascript jquery css jquery-mobile

【解决方案1】：

首先你在错误的地方搜索你的问题。

您违反了 Web 开发的主要规则之一“不要乱用原始代码！”。

您的问题不在 javascript 中，您的问题在 css 中。我已经下载了您的页面源代码并跟踪到错误：

<link rel="stylesheet" href="css/main.css" />

如果您将此行替换为：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

一切正常。不幸的是，你的 CSS 是一团糟，所以你需要自己解开它。这不是批评，但将来不要混合使用不同的 css 文件和您自己的文件。

【讨论】：

因混合 css 文件而被指控有罪。但我没有弄乱原始的 jquery 移动 css 文件。我只是将它合并到我自己的内部以减少 http 请求并删除所有与转换相关的 css 以使其更小。
有些东西弄乱了原始的 css，我自己会看的，但它太多了。
找到了！在我的字节贪婪驱动尝试尽可能减少基本 CSS，删除所有与转换相关的规则（因为我没有使用 ajax 页面转换）我无法理解标题上下滑动也利用了其中一些规则。对不起，这个蹩脚蹩脚的问题。让反对票开始吧！