如何在 jQuery 中监听单击并按住?

IT技术 javascript jquery events
2021-01-17 12:11:15

我希望能够在用户单击按钮时触发事件,然后按住该单击 1000 到 1500 毫秒。

是否有 jQuery 核心功能或插件可以实现这一点?

我应该自己滚动吗?我应该从哪里开始?

6个回答
var timeoutId = 0;

$('#myElement').on('mousedown', function() {
    timeoutId = setTimeout(myFunction, 1000);
}).on('mouseup mouseleave', function() {
    clearTimeout(timeoutId);
});

编辑:根据 AndyE 进行更正...谢谢!

编辑 2:现在对每个 gnarf 具有相同处理程序的两个事件使用绑定

好东西!在 jQuery Mobile 中实现,没有任何问题。
2021-03-14 12:11:15
您可以对 mouseup/mouseleave 使用相同的功能: .bind('mouseup mouseleave', function() {
2021-03-18 12:11:15
更新更好,但您也可以考虑清除mouseleave处理程序中的间隔
2021-03-19 12:11:15
@gnarf 好点!我已经编辑它以包含您的建议。
2021-03-23 12:11:15
@treeface Slick,但我对有效载荷的去向感到困惑。是否应该在 mouseup 事件中调用特定于实现的处理程序?
2021-03-31 12:11:15

空编码(但在这个小提琴上测试过

(function($) {
    function startTrigger(e) {
        var $elem = $(this);
        $elem.data('mouseheld_timeout', setTimeout(function() {
            $elem.trigger('mouseheld');
        }, e.data));
    }

    function stopTrigger() {
        var $elem = $(this);
        clearTimeout($elem.data('mouseheld_timeout'));
    }


    var mouseheld = $.event.special.mouseheld = {
        setup: function(data) {
            // the first binding of a mouseheld event on an element will trigger this
            // lets bind our event handlers
            var $this = $(this);
            $this.bind('mousedown', +data || mouseheld.time, startTrigger);
            $this.bind('mouseleave mouseup', stopTrigger);
        },
        teardown: function() {
            var $this = $(this);
            $this.unbind('mousedown', startTrigger);
            $this.unbind('mouseleave mouseup', stopTrigger);
        },
        time: 750 // default to 750ms
    };
})(jQuery);

// usage
$("div").bind('mouseheld', function(e) {
    console.log('Held', e);
})
当我们点击并按住设备时如何选择不同颜色的文本
2021-04-07 12:11:15

如果有人感兴趣,我为此做了一个简单的 JQuery 插件。

http://plugins.jquery.com/pressAndHold/

神奇的插件。加入我的项目和 bam,工作。
2021-03-21 12:11:15
好东西。能够修改它以检测对象已被拖动,从而删除告诉用户拖动对象的消息。
2021-03-22 12:11:15
您的插件不是为 Bootstrap 编写的,但与它配合得很好!没有额外的 CSS 或乱七八糟。只是工作。荣誉。
2021-04-04 12:11:15

据推测,您可以在 中开始setTimeout调用mousedown,然后在中取消它mouseup(如果mouseup在超时完成之前发生)。

但是,看起来有一个插件:longclick

这是我目前的实现:

$.liveClickHold = function(selector, fn) {

    $(selector).live("mousedown", function(evt) {

        var $this = $(this).data("mousedown", true);

        setTimeout(function() {
            if ($this.data("mousedown") === true) {
                fn(evt);
            }
        }, 500);

    });

    $(selector).live("mouseup", function(evt) {
        $(this).data("mousedown", false);
    });

}