在没有 jQuery mobile 的情况下在移动设备上使用 mousedown 事件? [英] Using mousedown event on mobile without jQuery mobile?

问题描述

我已经构建了一个 web 应用程序，为了稍微改进，我想添加 mousedown 和 mouseup 处理程序来交换图像(在本例中，使按钮看起来像是被按下了).

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).

我的代码是这样的:

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 事件同时发生，因此实际上什么也没发生.

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.

我尝试在 jQueryMobile 中使用 vmousedown 和 vmouseup 事件，但是这段代码:

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

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

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 工作，而且不需要 jQuery Mobile 的 CSS?

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

推荐答案

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

You're looking for touchstart and touchend. They are the events that vmousedown and vmouseup attempt to mimic.

这是一个例子:

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 之类的东西来进行此测试，如果设备不支持触摸事件，请绑定到常规桌面事件.

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

当您使用 touchstart/touchend/touchmove 时，您会获得一些有趣的信息，例如一次发生了多少次触摸，因此您可以检测用户是否正在滚动或尝试缩放.

When you use touchstart/touchend/touchmove you 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.

更新

由于事件处理程序中的 event 对象对于触摸事件和鼠标事件是不同的，如果你想知道事件的坐标，你可以做这样的事情(下面的例子假设Modernizr 已加载):

Since the event object 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):

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

    ...
})...

更新

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

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

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

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

这篇关于在没有 jQuery mobile 的情况下在移动设备上使用 mousedown 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！