Javascript 在没有 jQuery mobile 的情况下在移动设备上使用 mousedown 事件？

Using mousedown event on mobile without jQuery mobile?

提问by Esaevian

I've built a webapp, and for a little bit of polish, I wanted to add mousedown and mouseup handlers to swap out images (in this case, to make a button look like it's being pressed).

我已经构建了一个 web 应用程序，为了一点点润色，我想添加 mousedown 和 mouseup 处理程序来交换图像（在这种情况下，使按钮看起来像是被按下了）。

my code is something like this:

我的代码是这样的：

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")});
}

This works swimmingly on the desktop, but on mobile (testing in iOS Safari), the mousedown and mouseup events happen at the same time, so effectively nothing happens.

这在桌面上运行良好，但在移动设备上（在 iOS Safari 中测试），mousedown 和 mouseup 事件同时发生，因此实际上什么也没发生。

I tried to use the vmousedown and vmouseup events in jQueryMobile, however this code:

我尝试在 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")});
}

Just gave me the errors that vmousedown and vmouseup don't exist. Also, jQueryMobile overrides the CSS I've already written for the page.

只是给了我 vmousedown 和 vmouseup 不存在的错误。此外，jQueryMobile 覆盖了我已经为页面编写的 CSS。

So is there a way to get vmousedown and vmouseup to work, and to do so without jQuery Mobile's CSS?

那么有没有办法让 vmousedown 和 vmouseup 工作，并且在没有 jQuery Mobile 的 CSS 的情况下这样做？

回答by Jasper

You're looking for touchstartand touchend. They are the events that vmousedownand vmouseupattempt to mimic.

您正在寻找touchstart和touchend。它们是vmousedown并vmouseup试图模仿的事件。

Here's an example:

下面是一个例子：

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");
    });
}

This will work without any framework on any device that supports touch events. You could use something like Modernizrto do this test and if the device does not support touch events, bind to the regular desktop events.

这将在支持触摸事件的任何设备上没有任何框架的情况下工作。您可以使用Modernizr 之类的工具来进行此测试，如果设备不支持触摸事件，请绑定到常规桌面事件。

When you use touchstart/touchend/touchmoveyou get some interesting information, for instance how many touches are occurring at once, so you can detect if the user is scrolling or attempting to zoom.

当您使用touchstart/ touchend/touchmove你会得到一些有趣的信息，例如许多接触是如何一次发生，所以你可以检测用户是否滚动或试图放大。

UPDATE

更新

Since the eventobject inside an event handler differs for touch events and mouse events, if you want to know the coordinates of the event either way, you can do something like this (the example below assumes Modernizr has been loaded):

由于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

更新

I was looking this over and it seems like you don't need to detect the event type before binding the event handler:

我正在查看这个，似乎您不需要在绑定事件处理程序之前检测事件类型：

//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;

    ...
})...

If you are worried about receiving both events in quick succession you could use a timeout to throttle the event handler:

如果您担心快速连续接收两个事件，您可以使用超时来限制事件处理程序：

//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);
})...

Note: You can force mousedownand touchstartevents in quick succession with developer tools but I'm not sure about the real world use case here.

注意：您可以使用开发人员工具快速连续地强制mousedown和touchstart事件，但我不确定这里的真实用例。

回答by matteo

There is a way to get the vmouseup, vmousedown, vmousemove, vclick, etc. functionality of jQueryMobile without getting all the rest (and especially the side effects) of jquerymobile (i.e. enhancement, extra css, and the like)

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

• Go to http://jquerymobile.com/download-builder/(a tool for downloading a custom build of jquerymobile with only the components you need)
• select ONLY "Virtual Mouse (vmouse) Bindings"
• download it.

• 转到http://jquerymobile.com/download-builder/（用于下载仅包含您需要的组件的 jquerymobile 自定义构建的工具）
• 仅选择“虚拟鼠标（vmouse）绑定”
• 下载它。

The download will contain only a single .js files (in both minimized and uncompressed version). No css.

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

Link this script in the head of your html after plain jquery, and use it like this:

在普通 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>

NOTE: the methods .vmousedown(), .vmouseup(), etc. won't work. You have to bind the event listener with .on("vmousedown", ...). Not sure why: I guess this is because the part of jquerymobile that creates shortcut methods with the same name as the events is in some other module. Maybe it is possible to figure out which module it is and include it in the download, but I think it would force you to include other undesired dependencies.

注意：方法.vmousedown()、.vmouseup()等将不起作用。您必须将事件侦听器与.on("vmousedown", ...). 不知道为什么：我猜这是因为 jquerymobile 中创建与事件同名的快捷方法的部分位于其他模块中。也许可以找出它是哪个模块并将其包含在下载中，但我认为这会迫使您包含其他不需要的依赖项。

回答by pseudosavant

Have you considered styling your buttons using CSS instead? the :activestate will be triggered when a user is clicking/touching the element. Here is an example:

你有没有考虑过使用 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 will be much more performant and you will also be able to better separate concerns (display vs logic, etc).

CSS 的性能会更高，您还可以更好地分离关注点（显示与逻辑等）。

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

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