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

问题描述

我已经构建了一个webapp，为了进行一些改进，我想添加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.

更新

由于内部的事件对象触摸事件和鼠标事件的事件处理程序不同，如果你想知道事件的坐标，你可以做这样的事情（下面的例子假设已经加载了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;

    ...
})...

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;

    ...
})...

如果你有问题d关于快速连续接收两个事件你可以使用超时来限制事件处理程序：

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屋！