আমি কীভাবে 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 মোবাইলের মধ্যে প্রয়োগ করা হয়েছে।

— অ্যান্টনি

@ ট্রিফেস স্লিক, তবে আমি পেইলডটি কোথায় যাবে তা নিয়ে আমি বিভ্রান্ত। মাউসআপ ইভেন্টে বাস্তবায়ন-নির্দিষ্ট হ্যান্ডলারটি কল করা উচিত?

— বব স্টেইন

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

যদি কারও আগ্রহ থাকে তবে আমি এটির জন্য একটি সাধারণ জিকুয়ের প্লাগইন তৈরি করেছি।

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

Comments

সুন্দর. কোনও বস্তুকে টেনে এনে এমনটি সনাক্ত করতে এটি সংশোধন করতে সক্ষম হয়েছিল যাতে ব্যবহারকারীকে বস্তুকে টেনে আনতে বলার বার্তা সরিয়ে দিতে পারে।

— স্টারফস

চমত্কার প্লাগইন। আমার প্রকল্পে এবং বামে ফেলেছে, কাজ করে।

— অ্যান্ডি

আপনার প্লাগইন বুটস্ট্র্যাপের জন্য লেখা হয়নি, তবে এটির সাথে খুব সুন্দরভাবে কাজ করে! চারপাশে কোনও অতিরিক্ত সিএসএস বা গোলযোগ নেই। শুধু কাজ করে। যশ।

— অ্যান্ডি

Answer 4

সম্ভবত আপনি একটি setTimeoutকল চালু করতে পারেন mousedown, এবং তারপরে এটি বাতিল করুন mouseup(যদিmouseup আপনার সময়সীমা শেষ হওয়ার আগে ঘটে)।

যাইহোক, দেখে মনে হচ্ছে একটি প্লাগইন রয়েছে: লং ক্লিক ।

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

জেএসফিডেলে দেখুন

এখন আপনার হোল্ডিংয়ের সময় ঠিক করা এবং 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);
});