jQuery에서 클릭 앤 홀드를 청취하려면 어떻게 해야 합니까?

jQuery에서 클릭 앤 홀드를 청취하려면 어떻게 해야 합니까?

사용자가 버튼을 클릭한 다음 해당 버튼을 1,000~1,500ms 동안 누른 상태에서 이벤트를 실행할 수 있습니다.

jQuery 핵심 기능 또는 이미 이 기능을 활성화하는 플러그인이 있습니까?

제가 직접 굴릴까요?어디서부터 시작해야 할까요?

var timeoutId = 0;

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

편집: AndyE에 따른 수정...감사합니다!

편집 2: 동일한 처리기 퍼너프를 가진 두 이벤트에 대해 지금 바인딩 사용

공기 코드화됨(그러나 이 피들에서 테스트됨)

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

관심 있는 사람이 있으면 간단한 JQuery 플러그인을 만들었습니다.

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

아마도 당신은 시작할 수 있을 것입니다.setTimeout을 불러들입니다mousedown그런 다음 취소합니다.mouseup(만약에mouseup시간 초과가 완료되기 전에 발생합니다.

그러나 플러그인 longclick이 있는 것 같습니다.

    var _timeoutId = 0;

    var _startHoldEvent = function(e) {
      _timeoutId = setInterval(function() {
         myFunction.call(e.target);
      }, 1000);
    };

    var _stopHoldEvent = function() {
      clearInterval(_timeoutId );
    };

    $('#myElement').on('mousedown', _startHoldEvent).on('mouseup mouseleave', _stopHoldEvent);

현재 구현한 내용은 다음과 같습니다.

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

}

나는 그것을 쉽게 만들기 위해 약간의 코드를 썼습니다.

//Add custom event listener
$(':root').on('mousedown', '*', function() {
    var el = $(this),
        events = $._data(this, 'events');
    if (events && events.clickHold) {
        el.data(
            'clickHoldTimer',
            setTimeout(
                function() {
                    el.trigger('clickHold')
                },
                el.data('clickHoldTimeout')
            )
        );
    }
}).on('mouseup mouseleave mousemove', '*', function() {
    clearTimeout($(this).data('clickHoldTimer'));
});

//Attach it to the element
$('#HoldListener').data('clickHoldTimeout', 2000); //Time to hold
$('#HoldListener').on('clickHold', function() {
    console.log('Worked!');
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<img src="http://lorempixel.com/400/200/" id="HoldListener">

JSFidle 참조

이제 보류 시간을 설정하고 추가하면 됩니다.clickHold요소에 대한 이벤트

언급URL : https://stackoverflow.com/questions/4080497/how-can-i-listen-for-a-click-and-hold-in-jquery