JQuery টানুন এবং ড্রপ সহ ক্লিক ইভেন্ট প্রতিরোধ করা

Question 1

আমার পৃষ্ঠায় এমন উপাদান রয়েছে যা jQuery এর সাথে টেনে আনে। এই উপাদানগুলির কি ক্লিক ইভেন্ট রয়েছে যা অন্য পৃষ্ঠায় নেভিগেট করে (উদাহরণস্বরূপ সাধারণ লিঙ্কগুলি)।

ক্লিকের ফলে এ জাতীয় উপাদানটি ড্র্যাগ এবং স্থিতি স্থিতি না রেখে এড়াতে গুলি চালানো থেকে রোধ করার সর্বোত্তম উপায় কী?

আমার বাছাইযোগ্য উপাদানগুলির সাথে এই সমস্যা আছে তবে সাধারণ ড্রাগ এবং ড্রপের জন্য সমাধান নেওয়া ভাল বলে মনে করি।

আমি নিজেই সমস্যাটি সমাধান করেছি। এর পরে আমি দেখতে পেলাম যে একই সমাধানটি স্ক্রিপ্টাকুলাসের জন্য বিদ্যমান , তবে কারও কাছে এটি অর্জনের আরও ভাল উপায় থাকতে পারে।

Question 2

এমন একটি সমাধান যা আমার পক্ষে ভালভাবে কাজ করেছে এবং এর জন্য কোনও সময়সীমা দরকার নেই: (হ্যাঁ আমি কিছুটা পেডেন্টিক ;-)

টেনে আনতে শুরু করার সাথে আমি উপাদানটিতে একটি চিহ্নিতকারী শ্রেণি যুক্ত করি, যেমন 'নোক্লিক'। উপাদানটি ফেলে দেওয়া হলে, ক্লিক ইভেন্টটি ট্রিগার করা হয় - আরও স্পষ্টভাবে যদি টেনে আনার সমাপ্তি ঘটে, আসলে এটি কোনও বৈধ লক্ষ্যে ফেলে দেওয়া হবে না। ক্লিক হ্যান্ডলারে আমি উপস্থিত থাকলে চিহ্নিতকারী শ্রেণিটি সরিয়ে ফেলি, অন্যথায় ক্লিকটি স্বাভাবিকভাবে পরিচালিত হয়।

$('your selector').draggable({
    start: function(event, ui) {
        $(this).addClass('noclick');
    }
});

$('your selector').click(function(event) {
    if ($(this).hasClass('noclick')) {
        $(this).removeClass('noclick');
    }
    else {
        // actual click event code
    }
});

Question 3

সমাধান হ'ল ক্লিক হ্যান্ডলার যুক্ত করা যা ক্লিকের প্রসারিত করতে টানতে শুরু করতে পারে drag এবং তারপরে ড্রপ সঞ্চালনের পরে সেই হ্যান্ডলারটি সরান। ক্লিক প্রতিরোধ কাজ করতে শেষ ক্রিয়াটি কিছুটা বিলম্বিত হওয়া উচিত।

বাছাইয়ের জন্য সমাধান:

...
.sortable({
...
        start: function(event, ui) {
            ui.item.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.item.unbind("click.prevent");}, 300);
        }
...
})

টেনে আনার জন্য সমাধান:

...
.draggable({
...
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
...
})

Question 4

আমার একই সমস্যা ছিল এবং একাধিক পদ্ধতির চেষ্টা করেছিলাম এবং কেউই আমার পক্ষে কাজ করেনি।

সমাধান 1

$('.item').click(function(e)
{            
    if ( $(this).is('.ui-draggable-dragging') ) return false;
});

আমার জন্য কিছুই করে না টেনে আনার পরে আইটেমটি ক্লিক করা হচ্ছে।

সমাধান 2 (টম ডি বোয়ার দ্বারা)

$('.item').draggable(
{   
    stop: function(event, ui) 
    {
         $( event.originalEvent.target).one('click', function(e){ e.stopImmediatePropagation(); } );
    }
});

এটি ঠিক কাজ করে তবে একটি ক্ষেত্রে ব্যর্থ হয়- যখন আমি পূর্ণস্ক্রিন অনক্লিক হয়ে যাচ্ছিলাম:

var body = $('body')[0];     
req = body.requestFullScreen || body.webkitRequestFullScreen || body.mozRequestFullScreen;
req.call(body);

সমাধান 3 (সাশা ইয়ানোভেটস দ্বারা)

 $('.item').draggable({
        start: function(event, ui) {
            ui.helper.bind("click.prevent",
                function(event) { event.preventDefault(); });
        },
        stop: function(event, ui) {
            setTimeout(function(){ui.helper.unbind("click.prevent");}, 300);
        }
})

এটি আমার পক্ষে কাজ করে না।

সমাধান 4 - একমাত্র একমাত্র ঠিক কাজ করেছে

$('.item').draggable(
{   
});
$('.item').click(function(e)
{  
});

হ্যাঁ, এটি- সঠিক অর্ডারটি কৌশলটি কার্যকর করে you প্রথমে আপনাকে ড্রাগ্যাগেবল () এরপরে বাঁধতে হবে (তারপরে) ইভেন্টটি ক্লিক করুন। এমনকি যখন আমি ক্লিক () ইভেন্টে ফুলস্ক্রিন টগলিং কোড রেখেছি তখনও টেনে আনার সময় এটি ফুলস্ক্রিনে যায় নি। আমার জন্য একদম সঠিক!

Question 5

আমি এটি যুক্ত করতে চাই যে ক্লিক ইভেন্টটিকে কেবল আটকাতে সক্ষম বা বাছাইযোগ্য ইভেন্টের পরে ক্লিক ইভেন্টটি সংজ্ঞায়িত করা হলে কেবল ক্লিক ইভেন্টটি কাজ করা রোধ করবে। যদি ক্লিকটি আগে যুক্ত করা হয় তবে এটি টেনে নিয়ে সক্রিয় হয়ে যায়।

Question 6

আমি সত্যিই টাইমার ব্যবহার বা প্রতিরোধ করতে পছন্দ করি না, তাই আমি যা করেছি তা হ'ল:

var el, dragged

el = $( '#some_element' );

el.on( 'mousedown', onMouseDown );
el.on( 'mouseup', onMouseUp );
el.draggable( { start: onStartDrag } );

onMouseDown = function( ) {
  dragged = false;
}

onMouseUp = function( ) {
  if( !dragged ) {
    console.log('no drag, normal click')
  }
}

onStartDrag = function( ) {
  dragged = true;
}

রকসোলিড ..

Question 7

lex82 এর সংস্করণ তবে .সোর্টেবল () এর জন্য

 start: function(event, ui){
 ui.item.find('.ui-widget-header').addClass('noclick');
 },

এবং আপনার কেবল প্রয়োজন হতে পারে:

 start: function(event, ui){
 ui.item.addClass('noclick');
 },

এবং আমি টগলটির জন্য যা ব্যবহার করছি তা এখানে:

$("#datasign-widgets .ui-widget-header").click(function(){
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');

}
else {
$(this).next().slideToggle();
$(this).find('.ui-icon').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
}
});

Question 8

ডিফল্ট প্রতিরোধ না করেই সাশার উত্তরের একটি সম্ভাব্য বিকল্প:

var tmp_handler;
.sortable({
        start : function(event,ui){
            tmp_handler = ui.item.data("events").click[0].handler;
            ui.item.off();
        },
        stop : function(event,ui){
            setTimeout(function(){ui.item.on("click", tmp_handler)}, 300);
        },

Question 9

JQuery UI- এ, টেনে নিয়ে যাওয়া উপাদানগুলিকে "ui-draggable-ખેંચীকরণ" শ্রেণি দেওয়া হয়।
তাই আমরা ক্লিক করতে হবে কি না তা নির্ধারণ করতে এই ক্লাসটি ব্যবহার করতে পারি, কেবল ইভেন্টটি দেরি করে।
আপনার "স্টার্ট" বা "স্টপ" কলব্যাক ফাংশন ব্যবহার করার দরকার নেই, কেবল করুন:

$('#foo').on('mouseup', function () {
    if (! $(this).hasClass('ui-draggable-dragging')) {
        // your click function
    }
});

এটি "মাউসডাউন" বা "ক্লিক" এর পরিবর্তে "মাউসআপ" থেকে ট্রিগার করা হয়েছে - সুতরাং কিছুটা বিলম্ব রয়েছে, নিখুঁত হতে পারে না - তবে এখানে প্রস্তাবিত অন্যান্য সমাধানগুলির চেয়ে এটি সহজ।

Question 10

এটি এবং কয়েকটি থ্রেড পড়ার পরে এটিই ছিল আমার সমাধান।

var dragging = false;
$("#sortable").mouseover(function() {
    $(this).parent().sortable({
        start: function(event, ui) {
            dragging = true;
        },
        stop: function(event, ui) {
            // Update Code here
        }
    })
});
$("#sortable").click(function(mouseEvent){
    if (!dragging) {
        alert($(this).attr("id"));
    } else {
        dragging = false;
    }
});

Question 11

আমার ক্ষেত্রে এটি এর মতো কাজ করেছে:

$('#draggable').draggable({
  start: function(event, ui) {
    $(event.toElement).one('click', function(e) { e.stopPropagation(); });
  }
});

Question 12

আপনি ইভেন্ট.প্রিভেন্টডিফল্ট () ব্যবহার করে লিঙ্কটি অক্ষম করার চেষ্টা করেছেন; শুরু ইভেন্টে এবং এটিকে পুনরায় সক্ষম করে টেনে আনতে থামাতে ইভেন্ট বা ড্রপ ইভেন্টটি আনবাইন্ড ব্যবহার করে?

Question 13

উপরের উত্তরগুলিতে যুক্ত করার জন্য কেবল একটি সামান্য বলি। আমাকে একটি ডিভ তৈরি করতে হয়েছিল যাতে সেলসফোরেন্স উপাদানটি ড্রাগেবলযোগ্য রয়েছে তবে সেলসফোরস উপাদানটিতে কিছু ভিজুয়ালফর্স গাবল্ডগিগুকের মাধ্যমে এইচটিএমএলে সংজ্ঞায়িত একটি অনক্লিক ক্রিয়া রয়েছে।

স্পষ্টতই এটি "টেনে আনার পরে ক্লিকের ক্রিয়া সংজ্ঞায়িত করুন" বিধি লঙ্ঘন করে, সুতরাং একটি কর্মক্ষেত্র হিসাবে আমি বিক্রয়কর্মে উপাদানটির ক্রিয়াকলাপটিকে "onDblClick" ট্রিগার করতে পুনরায় সংজ্ঞায়িত করেছি এবং ধারক ডিভের জন্য এই কোডটি ব্যবহার করেছি:

$(this).draggable({
        zIndex: 999,
        revert: true,
        revertDuration: 0,
        start: function(event, ui) {
                   $(this).addClass('noclick');
                }
});

$(this).click(function(){
    if( $(this).hasClass('noclick'))
    {
        $(this).removeClass('noclick');
    }
    else
    {
        $(this).children(":first").trigger('dblclick');
    }
});

পিতামাতার ক্লিক ইভেন্টটি মূলত ব্যবহারকারীর অভিজ্ঞতা অক্ষত রেখে শিশু উপাদানকে ডাবল-ক্লিক করার প্রয়োজনীয়তাটি গোপন করে।

Question 14

আমি এরকম চেষ্টা করেছি:

var dragging = true; 

$(this).click(function(){
  if(!dragging){
    do str...
  }
});

$(this).draggable({
  start: function(event, ui) {
      dragging = true;
  },

  stop: function(event, ui) {
      setTimeout(function(){dragging = false;}, 300);
  }

});

Question 15

আমার জন্য সহায়ক হিসাবে বিকল্পগুলিতে সহায়তাকারীকে সহায়তা করতে সহায়তা করেছেন:

.sortable({
   helper : 'clone', 
   start:function(), 
   stop:function(),
   .....
});

ক্লোনিং ডোম উপাদানটিকে টেনে নিয়ে যাওয়া ইভেন্টটির বুবলি আটকাতে দেখে মনে হচ্ছে। আমি কোনও ইভেন্টপ্রোপেশন, বুদবুদ ইত্যাদি এড়াতে পারিনি This এটি ছিল আমার পক্ষে একমাত্র কার্যকরী সমাধান।

Question 16

অনমুডাউন এবং অনমাউসআপ ইভেন্টগুলি আমার একটি ছোট প্রকল্পে কাজ করেছিল।

var mousePos = [0,0];
function startClick()
{
    mousePos = [event.clientX,event.clientY];
}
        
function endClick()
{
    if ( event.clientX != mousePos[0] && event.clientY != mousePos[1] )
    {
        alert( "DRAG CLICK" );
    }
    else
    {
        alert( "CLICK" );
    }
}

<img src=".." onmousedown="startClick();" onmouseup="endClick();" />

স্নিপেট প্রসারিত করুন

হ্যা আমি জানি. সবচেয়ে পরিষ্কার উপায় নয়, তবে আপনি ধারণাটি পাবেন।

Question 17

সবচেয়ে সহজ এবং শক্তিশালী সমাধান? আপনার ড্রাগেবলের উপরে কেবল স্বচ্ছ উপাদান তৈরি করুন।

.click-passthrough {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

element.draggable({        
        start: function () {

        },
        drag: function(event, ui) {
            // important! if create the 'cover' in start, then you will not see click events at all
                  if (!element.find('.click-passthrough').length) {
                      element.append("<div class='click-passthrough'></div>");
                  }
        },
        stop: function() {
          // remove the cover
          element.find('.click-passthrough').remove();
        }
    });