Javascript 在没有jQuery mobile的手机上使用mousedown事件？_Javascript_Jquery_Jquery Mobile_Mouseevent

Javascript 在没有jQuery mobile的手机上使用mousedown事件？

javascript jquery jquery-mobile

Javascript 在没有jQuery mobile的手机上使用mousedown事件？,javascript,jquery,jquery-mobile,mouseevent,Javascript,Jquery,Jquery Mobile,Mouseevent,我已经构建了一个webapp，为了稍加润色，我想添加mousedown和mouseup处理程序来交换图像（在本例中，使按钮看起来像是被按下的）我的代码是这样的： window.onload = function() { //preload mouse down image here via Image() $("#button_img").mousedown(function(){$("#button_img").attr("src","button_on.png");});

我已经构建了一个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")});
}

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

这在桌面上运行得很顺利，但在移动设备上（在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

和

vmousedup

试图模拟的事件

下面是一个例子：

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

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

当您使用

touchstart

touchend

touchmove

时，您会得到一些有趣的信息，例如一次发生了多少次触摸，因此您可以检测用户是否正在滚动或试图缩放

更新

由于事件处理程序中的

事件

对象对于触摸事件和鼠标事件不同，如果您想知道事件的坐标，可以执行类似操作（以下示例假设已加载Modernizer）：

更新

我查看了一下，似乎在绑定事件处理程序之前不需要检测事件类型：

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

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

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

，jQueryMobile的其他功能（尤其是副作用）（即增强、额外css等）

转到（用于下载只包含所需组件的jquerymobile自定义版本的工具）
仅选择“虚拟鼠标（vmouse）绑定”
下载它

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

在普通jquery之后在html的头部链接此脚本，并按如下方式使用：

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

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


$（function（）{//或将其替换为window.onload
//你的代码在这里，例如。
$（“#按钮_img”）。在（“vmousedown”，function（）{
/*随便*/
});
//警告：这不起作用（请参见下面的注释）：
//$（“#button_img”）.vmousedown（function（）{/*which*/}）；//不起作用
});

注意：方法

.vmousedown（）

，

.vmouseup（）

等将不起作用。您必须将事件侦听器绑定到

.on（“vmousedown”，…）

。

不确定原因：我想这是因为jquerymobile中创建与事件同名的快捷方式方法的部分在其他模块中。也许可以找出它是哪个模块并将其包含在下载中，但我认为这会迫使您包含其他不需要的依赖项。

您是否考虑过使用CSS来设置按钮的样式？当用户单击/触摸元素时，将触发

：active

状态。以下是一个例子：

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

/*默认状态*/
#按钮{
背景图片：url（'button_off.png'）；
}
/*点击/触摸状态*/
#按钮\u img:活动{
背景图片：url（'button_on.png'）；
}

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

JSBin:

使用touchstart或touchend作为触摸设备

大多数情况下，您希望捕获touchstart和鼠标向下。您需要确保处理程序只触发一次。实现这一点的最简单方法是捕获它们并调用e.preventDefault（）

资料来源：

如果浏览器因单个用户输入而触发触摸和鼠标事件，则浏览器必须在任何鼠标事件之前触发触摸启动。因此，如果应用程序不希望在特定的触摸目标元素上触发鼠标事件，则该元素的触摸事件处理程序应调用preventDefault（），并且不会调度其他鼠标事件

虽然这似乎满足OP的特定用例，但这个答案并没有回答提出的问题，而且它是不准确的。Vmousedown和vmouseup不仅仅是“尝试模仿”touchstart和touchend。它们还提取了触摸事件和鼠标事件之间的所有差异，这样您就可以像使用mouseup和mousedown一样使用vmousedown和vmouseup。如果您使用touchstart和touchend，一般来说，可能需要更改大量内容，并且还需要为这两种事件复制代码。因此，问题仍然没有答案：如何在不使用整个jquerymobile框架的情况下利用vmouseup和vmousedown。非常感谢。同时，我发现可以在下载jquerymobile的定制版本，并且只包括您需要的模块，在本例中是虚拟鼠标，顺便说一下，这似乎是相当多的代码（但也包括vmousemove）。还是要试一下,，though@matteo这是jQuery手机公司的一个不错的工具。看起来只是从jQuery Mob下载了vmouse事件