在没有jQuery移动设备的移动设备上使用mousedown事件？

我已经构建了一个web应用程序，并且为了一点点擦亮，我想添加mousedown和mouseup处理程序来交换图像（在这种情况下，使按钮看起来像被按下）。在没有jQuery移动设备的移动设备上使用mousedown事件？

我的代码是这样的：

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浏览器测试），鼠标按下和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这样做？

在此先感谢
-esa

来源

2012-06-21 Esaevian

Hey budy！你已经得到了你的答案，这一切都很好。但看，只是为了说明：在按钮上使用图像不是最好的用户体验，请尝试只使用CSS。您可以在http://getbootstrap.com/components和其他许多框架中找到一些漂亮的按钮样式，甚至创建自己的风格。尝试一下！你会喜欢它 –

@Guilherme：你也知道，在按钮上使用图像是有正当理由的。在我的情况下，我使用SVG模拟物理摇杆开关，这不可能仅使用CSS。但我也没有直接操作按钮样式。我所做的只是添加和删除类名。 – user128216

不错：D图像并不差，只是不总是最好的选择。在这种情况下，即使它可能用于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事件与开发工具，但我不知道在现实世界使用案例在这里。

来源

2012-06-21 19:20:22 Jasper

真棒，完美的作品，谢谢。 – Esaevian

虽然这似乎满足OP的具体用例，但这个回答并没有回答它提出的问题，而且它也不准确。 Vmousedown和vmouseup不只是“试图模仿”touchstart和touchend。它们还抽象出触摸事件和鼠标事件之间的所有区别，以便您可以像使用mouseup和mousedown一样使用vmousedown和vmouseup。如果您使用touchstart和touchend，一般来说，可能需要更改很多事情，并且您还需要复制这两种事件的代码。 – matteo

所以，这个问题仍然没有答案：如何在不使用整个jquerymobile框架的情况下利用vmouseup和vmousedown。 – matteo

有一种方式来获得vmouseup，vmousedown，vmousemove，vclick，jQueryMobile的等功能没有得到jquerymobile的所有的休息（特别是副作用）（即增强，额外的CSS等）

转到http://jquerymobile.com/download-builder/
选择ONLY“虚拟鼠标（VMOUSE）绑定”
下载（下载jquerymobile的自定义生成只有你所需要的组件的工具）。

下载将只包含一个.js文件（包括最小化版本和未压缩版本）。没有css。

链接这个脚本在平原jQuery的后HTML的头，像这样使用：

<head> 
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> 
    <script src="whatever/path/jquery.mobile.custom.min.js"></script> 
    <script> 
    $(function(){ // or replace this with window.onload for that matter 
     // Your code here, e.g. 
     $("#button_img").on("vmousedown", function() { 
     /*whatever*/ 
     }); 
     // CAUTION: this won't work (see note below): 
     // $("#button_img").vmousedown(function(){/*whatever*/}); // WON'T WORK 
    }); 
    </script> 
</head>

注意：方法.vmousedown()，.vmouseup()等将无法正常工作。您必须将事件侦听器与.on("vmousedown", ...)绑定。不知道为什么：我猜这是因为jquerymobile中创建与事件同名的快捷方法的部分在其他模块中。也许有可能找出它是哪个模块，并将其包含在下载中，但我认为这会迫使你包含其他不期望的依赖关系。

来源

2014-07-02 20:52:46 matteo

'vmouse'事件是自定义事件而不是方法，因此您需要绑定'.on（）'unbind'.off（）'它们。 – Omar

太棒了，效果很好，不会强制我使用jQuery UI或完整的jQuery Mobile库。 – PaulBGD

完美无瑕，完全是我之后的事情，我不需要Jquery手机CSS或其他东西，它显示的加载消息越来越严重。很多谢谢=） – Partack

你有没有考虑使用CSS设计你的按钮呢？当用户点击/触摸元素时，将触发:active状态。这里有一个例子：

/* Default state */ 
#button_img { 
    background-image: url('button_off.png'); 
} 

/* Clicked/touched state */ 
#button_img:active { 
    background-image: url('button_on.png'); 
}

CSS将更加高性能，你也将能够更好地分离关注（显示VS逻辑等）。

JSBin：http://jsbin.com/beyin/1/

来源

2014-07-07 23:31:43 pseudosavant

我不知道为什么这个答案得到了downvoted，确实，我同意这不是首发的要求，但特别考虑到请求本身是关于图像交换（也是公平的，从他似乎没有意识到的几个概念）我完全支持这个答案。另外我想补充一点，JS被滥用于完全有权使用CSS的任务。这种行为应该被彻底根除，我鼓励人们使用CSS进行渲染（这也更快），并让JS去做：做一个控制器。 – MacK

我低估了答案，因为它与回答问题无关，这与vmouse事件有关的一个非常具体的问题，并且此答案表明甚至不使用事件。这可能是问题中提供的特定示例的解决方案，但它不涉及该问题，并且不适用于需要事件的任何用例。这样的建议的正确位置将是对这个问题的评论。如果这是一个评论，我甚至会提高它的评价。 OP显示的多少知识无关紧要;答案适用于所有人，而不仅仅是OP。 – matteo

@matteo OP在第一句话中说：“为了一点点擦亮，我想......换出图像（在这种情况下，让按钮看起来像被按下）”。他们问如何做到这一点，但已经开始使用jQuery的特定路径。该路径不是“使按钮看起来像被按下”的理想方式。 OP仍然可以使用他们的jQuery解决方案，但CSS是实现这一目标的“正确”方式。这个答案不属于评论，即使它不是最终的答案。 – pseudosavant

在没有jQuery移动设备的移动设备上使用mousedown事件？

回答

相关问题