jQuery.on "touchstart mousedown" - 两个事件都在触摸屏设备上触发答案

【问题标题】：jQuery.on "touchstart mousedown" - both events are triggered on touchscreen devicejQuery.on "touchstart mousedown" - 两个事件都在触摸屏设备上触发
【发布时间】：2014-08-27 08:59:05
【问题描述】：

我的问题是我无法取消触发 touchstart 后触发的 mousedown 事件。这个问题是 Android 的原生浏览器特有的。

Chrome 和 Safari 都在 Android 和 iOS (onMenuInteraction) 中成功执行了我的方法。我的问题似乎仅限于 Android 的本机浏览器（对我来说，它预装了 Android 4.1.2）。

以下是我从 Javascript 对象中提取的代码。

MenuButtonView.prototype.onSmallScreenSetUp = function() {
    $("#mobileMenuBtn").on( { "touchstart mousedown": $.proxy( this.onMenuInteraction, this ) } );
}

MenuButtonView.prototype.onMenuInteraction = function(e) {
    console.log( this, "onMenuInteraction", e );
    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();
}

请有人告诉我如何取消在您的手指触摸屏幕触发 touchstart 事件后触发的 mousedown 事件。

此要求基于管理与桌面和移动/平板电脑平台的交互。在您使用 Android 原生浏览器进行测试之前，一切正常。

非常感谢

【问题讨论】：

标签： javascript jquery html mobile

【解决方案1】：

检查是否存在touchstart 支持，设置一个变量以确定您提供的支持：

//touchstart or mousedown
var click = ('ontouchstart' in document.documentElement)  ? 'touchstart' : 'mousedown';

然后使用：

$(element).on(click,function(){
    //do stuff
});

请注意，此实例中的 click 是一个变量，而不是一个字符串。

【讨论】：

这在带有触摸屏和鼠标的新型笔记本电脑上如何工作？
我认为他们使用 touchstart 但他们对鼠标输入的响应就像触摸一样。几个月前我对此进行了测试，我确信这就是发生的事情。不过，我现在无法使用这样的设备进行测试。我确实记得当时我正在构建的东西必须通过 MS Surface 测试并且它确实通过了。
@CandleCoder 操作系统和浏览器是什么？我在 MS Surface 上进行了测试（1 1/2 年前），它奏效了。
华硕 chromebook
@CandleCoder 浏览器？

【解决方案2】：

如果触发了touchstart，则使用e.preventDefault(); 取消mousedown 事件。

【讨论】：

唯一有效的解决方案！其他人不明白，因为他们没有带触摸屏和鼠标的笔记本电脑（例如 Chromebook）谢谢！

【解决方案3】：

检测支持哪些事件 - 无需同时支持这两个事件
相应地加载 $.on()
在添加事件之前删除所有已传播和/或预先存在（不需要的）事件不会成为问题的事件

$("#mobileMenuBtn").off().on( { "touchstart mousedown": $.proxy( this.onMenuInteraction, this ) } );

参考资料：

how-to-check-browser-for-touchstart-support-using-js-jquery

jquery:off()

【讨论】：

Re #1 一般情况下并非如此，设备可以同时具有触摸屏和鼠标设备。例如，Chromebook 或 Windows 触摸屏平板电脑/笔记本电脑。如果这是一个 Android 应用程序（例如嵌入在 Phonegap/Cordova 中），那么您可以假设只是触摸事件并完全跳过鼠标。如果它是一个网页，你不能假设，因为它可以在包括桌面在内的几种不同的浏览器中访问。试试这个：stackoverflow.com/questions/13655919/…
他专门指的是 Android，而我正在回答他的 android 问题；）我同意，根据给定的环境，您可能需要以不同的方式做事。

【解决方案4】：

结合上述 JDA 和 Dave Methvin 的建议（感谢两位），我的问题的解决方案如下。

在“touchstart mousedown”事件的回调中，我专门关闭了“touchstart mousedown”。这将停止调用任何后续的触摸或鼠标事件。

我发现在 Android 的本机浏览器中实现“touchend”有问题 - 但是“mouseup”事件似乎很好地涵盖了这两个目的，也就是说，在我看来，它的行为方式与您期望的“touchend”相同。

当调用 'mouseup' 时，我会重新将“touchstart 和 mousedown”事件应用到按钮。

我的解决方案的简化版本如下：

$(document).ready( function() {

        $("#mobileMenuBtn").on( { "touchstart mousedown" : onInteraction,
                                  "mouseup" : onInteractionEnd } );

        function onInteraction(e) {
            $("#mobileMenuBtn").off( "touchstart mousedown" );
        }

        function onInteractionEnd(e) {
            $("#mobileMenuBtn").on( { "touchstart mousedown" : onInteraction } );
        }

})

希望这可以帮助其他发现相同问题的人。

【讨论】：