मैं jQuery में एक क्लिक-एंड-होल्ड के लिए कैसे सुन सकता हूं?

Question

मैं एक ईवेंट को फायर करने में सक्षम होना चाहता हूं जब कोई उपयोगकर्ता किसी बटन पर क्लिक करता है, तो 1000 से 1500 एमएस के लिए उस क्लिक को दबाए रखता है।

क्या jQuery कोर कार्यक्षमता या एक प्लगइन है जो पहले से ही इसे सक्षम करता है?

क्या मुझे अपना रोल करना चाहिए? मुझे कहां से शुरू करना चाहिए?

Comments

जावास्क्रिप्ट में लॉन्ग प्रेस के

— डेर होकस्टाप्लर

कैसे 'टैपहोल्ड' के बारे में ??

— रोशदी

Answer 1

var timeoutId = 0;

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

संपादित करें : सुधार प्रति एंडी ... धन्यवाद!

2 संपादित करें : प्रति बार एक ही हैंडलर के साथ दो घटनाओं के लिए बाइंड का उपयोग करना

Comments

अपडेट बेहतर है, लेकिन आप एक mouseleaveहैंडलर में भी अंतराल को साफ करने पर विचार कर सकते हैं।

— एंडी ई

आप माउसअप / मूसलीव के लिए एक ही फ़ंक्शन का उपयोग कर सकते हैं:.bind('mouseup mouseleave', function() {

— gnarf

@gnarf अच्छी बात! मैंने इसे आपके सुझाव को शामिल करने के लिए संपादित किया है।

— ट्रीफेस

अच्छी सामग्री! किसी भी मुद्दे के बिना jQuery मोबाइल के भीतर लागू किया गया।

— एंथनी

@treeface स्लिक, लेकिन मुझे भ्रम है कि पेलोड कहां जाएगा। क्या कार्यान्वयन-विशिष्ट हैंडलर को माउसअप ईवेंट में बुलाया जाना चाहिए?

— बॉब स्टीन

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

Comments

जब हम डिवाइस पर टैप और होल्ड करते हैं, तो अलग-अलग कलर वाले टेक्स्ट को कैसे चुनें

— लकी

Answer 3

अगर कोई दिलचस्पी रखता है तो मैंने इसके लिए एक सरल JQuery प्लगइन बनाया है।

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

Comments

अच्छा है। यह पता लगाने के लिए इसे संशोधित करने में सक्षम था कि एक वस्तु को घसीटा गया था ताकि उपयोगकर्ता को वस्तु को खींचने के लिए कहे गए संदेश को हटाया जा सके।

— स्टारफ्स

FANTASTIC प्लगइन। मेरे प्रोजेक्ट और बेम में काम करता है।

— एंडी

आपका प्लगइन बूटस्ट्रैप के लिए नहीं लिखा गया था, लेकिन इसके साथ बहुत अच्छी तरह से काम करता है! कोई अतिरिक्त सीएसएस या आसपास गड़बड़ नहीं। बस काम करता है। कुडोस।

— एंडी

Answer 4

संभवतः आप setTimeoutकॉल को बंद कर सकते हैं mousedown, और फिर इसे रद्द कर सकते हैं mouseup(यदि)mouseup आपका समय समाप्त होने से पहले ऐसा होता है)।

हालाँकि, ऐसा लगता है कि एक प्लगइन है: longclick ।

Answer 5

यहाँ मेरा वर्तमान कार्यान्वयन है:

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

}

Answer 6

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

Answer 7

मैंने इसे आसान बनाने के लिए कुछ कोड लिखे

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

JSFiddle पर देखें

अब आपको clickHoldअपने तत्व पर पकड़ और घटना को जोड़ने का समय निर्धारित करने की आवश्यकता है

Answer 8

इसे इस्तेमाल करे:

var thumbnailHold;

    $(".image_thumb").mousedown(function() {
        thumbnailHold = setTimeout(function(){
             checkboxOn(); // Your action Here

         } , 1000);
     return false;
});

$(".image_thumb").mouseup(function() {
    clearTimeout(thumbnailHold);
});