在没有jQuery mobile的移动设备上使用mousedown事件？
我已经构建了一个webapp，为了进行一些改进，我想添加mousedown和mouseup处理程序来交换图像（在这种情况下，使按钮看起来像被按下）。
我的代码是这样的：
window.onload = function() { //preload mouse down image here via Image() $("#button_img").mousedown(function(){$("#button_img").attr("src","button_on.png");}); $("#button_img").mouseup(function(){$("#button_img").attr("src","button_off.png")}); } 这在桌面上游戏，但在移动设备上（在iOS Safari中测试），mousedown和mouseup事件同时发生，因此实际上没有任何反应。
我试图在jQueryMobile中使用vmousedown和vmouseup事件，但是这段代码：
//include jquerymobile.js and jquerymobile.css window.onload = function() { //preload mouse down image here via Image() $("#button_img").vmousedown(function(){$("#button_img").attr("src","button_on.png");}); $("#button_img").vmouseup(function(){$("#button_img").attr("src","button_off.png")}); }
刚刚给了我vmousedown和vmouseup不存在的错误。 此外，jQueryMobile会覆盖我为页面编写的CSS。
那么有没有办法让vmousedown和vmouseup工作，并且没有jQuery Mobile的CSS这样做？
你正在寻找touchstart和touchend 。 它们是vmousedown和vmouseup试图模仿的事件。
这是一个例子：
window.onload = function() { //preload mouse down image here via Image() $("#button_img").bind('touchstart', function(){ $("#button_img").attr("src","button_on.png"); }).bind('touchend', function(){ $("#button_img").attr("src","button_off.png"); }); }
这将在任何支持触摸事件的设备上没有任何框架的情况下工作。 您可以使用Modernizr之类的东西来执行此测试，如果设备不支持触摸事件，则绑定到常规桌面事件。
当您使用touchstart / touchend / touchmove您会获得一些有趣的信息，例如一次发生多少次触摸，因此您可以检测用户是在滚动还是尝试缩放。
UPDATE
由于事件处理程序中的event对象因触摸事件和鼠标事件而异，如果您想以任何方式知道事件的坐标，您可以执行以下操作（以下示例假定已加载Modernizr）：
//determine which events to use var startEventType = 'mousedown', endEventType = 'mouseup'; if (Modernizr.touch === true) { startEventType = 'touchstart'; endEventType = 'touchend'; } //bind to determined event(s) $("#button_img").bind(startEventType, function(event) { //determine where to look for pageX by the event type var pageX = (startEventType === 'mousedown') ? event.pageX : event.originalEvent.touches[0].pageX; ... })...
UPDATE
我在看这个，看起来你不需要在绑定事件处理程序之前检测事件类型：
//bind to determined event(s) $("#button_img").bind('mousedown touchstart', function(event) { //determine where to look for pageX by the event type var pageX = (event.type.toLowerCase() === 'mousedown') ? event.pageX : event.originalEvent.touches[0].pageX; ... })...
如果您担心快速连续接收这两个事件，可以使用超时来限制事件处理程序：
//create timer var timer = null; //bind to determined event(s) $("#button_img").bind('mousedown touchstart', function(event) { //clear timer clearTimeout(timer); //set timer timer = setTimeout(function () { //determine where to look for pageX by the event type var pageX = (event.type.toLowerCase() === 'mousedown') ? event.pageX : event.originalEvent.touches[0].pageX; ... }, 50); })...
注意：您可以使用开发人员工具快速连续强制mousedown和touchstart事件，但我不确定这里的真实世界用例。
有一种方法可以获得vmouseup ， vmousedown ， vmousemove ， vclick等function，而无需获得jquerymobile的其余部分（尤其是副作用）（即增强，额外的css等）
- 转到http://jquerymobile.com/download-builder/ （一个只下载所需组件的jquerymobile自定义构建工具）
- 只选择“虚拟鼠标（vmouse）绑定”
- 下载它。
下载将只包含一个.js文件（最小化和未压缩版本）。 没有css。
在普通jquery之后将此脚本链接到html的头部，并像这样使用它：
注意 ：方法.vmousedown() .vmouseup()等不起作用。 您必须使用.on("vmousedown", ...)绑定事件侦听器。 不确定原因：我想这是因为jquerymobile中创建与事件同名的快捷方法的部分是在其他模块中。 也许有可能找出它是哪个模块并将其包含在下载中，但我认为它会强制您包含其他不需要的依赖项。
您是否考虑使用CSS来设置按钮样式？ :active当用户点击/触摸元素时，将触发:active状态。 这是一个例子：
/* Default state */ #button_img { background-image: url('button_off.png'); } /* Clicked/touched state */ #button_img:active { background-image: url('button_on.png'); }
CSS将更加高效，您还可以更好地分离关注点（显示与逻辑等）。
JSBin： http ： //jsbin.com/beyin/1/