代码之家  ›  专栏  ›  技术社区  ›  Schrute

如何检测鼠标移动和长触摸后的mouseup事件?

  •  1
  • Schrute  · 技术社区  · 10 年前

    例子: http://jsfiddle.net/za14jqw0/3/

    HTML格式:

    <div id="wrapper">
        <div id="a"></div>
    </div>
    

    CSS:

    #a {
        width: 30px;
        height: 30px;
        background-color: red;
    }
    

    JavaScript:

    $('#wrapper').on('mouseup', function() {
        $('#a').css('background-color', 'yellow');
    });
    

    每当有鼠标上升事件时,红色框将变为黄色。

    问题是,在触摸设备上,如果用户触摸屏幕,移动手指并等待几秒钟,则不会触发mouseup事件。

    我如何检测到它?

    1 回复  |  直到 5 年前
        1
  •  1
  •   Jack    10 年前

    要支持触摸设备,您需要 'touchend'

    MDN:

    当触摸点从 触摸表面。

    jQuery

    $('#wrapper').on('mouseup touchend', function() {
        $('#a').css('background-color', 'yellow');
    });
    

    FIDDLE

    注意事项:

    我找不到关于跨浏览器支持的统计数据,考虑到移动浏览器的波动性,这令人担忧。如果需要,可以使用诸如jQuerymobile之类的库,该库具有等效的 'tap' event 。请记住,您可以使用 download builder 以消除膨胀。