মোবাইল সাফারিতে ক্লিক ইভেন্টগুলিতে 300 মিমি বিলম্ব দূর করুন

Question 1

আমি পড়েছি যে লিংক / বোতামটি ইভেন্টটি চালুর সময় থেকে লিঙ্ক / বোতামটি ক্লিক করার সময় থেকে মোবাইল সাফারি ক্লিক ইভেন্টগুলিতে 300 মিমি দেরি করে । বিলম্বের কারণটি হ'ল অপেক্ষা করতে হবে যে ব্যবহারকারী ডাবল-ক্লিক করতে চায় কিনা, তবে ইউএক্স দৃষ্টিকোণ থেকে 300ms অপেক্ষা করা প্রায়শই অনাকাঙ্ক্ষিত।

এই 300 মিমি দেরি করার একটি সমাধান হ'ল jQuery মোবাইল "ট্যাপ" হ্যান্ডলিং ব্যবহার করা। দুর্ভাগ্যক্রমে আমি এই কাঠামোর সাথে পরিচিত নই এবং যদি আমার প্রয়োজন হয় touchendতবে সঠিকভাবে প্রয়োগ করা কোডের একটি লাইন বা দুটি যদি আমার প্রয়োজন হয় তবে কিছু বড় কাঠামো লোড করতে চাই না ।

অনেক সাইটের মতো, আমার সাইটেও অনেক ক্লিক ইভেন্ট রয়েছে:

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

এবং আমি যা করতে চাই তা হ'ল এই জাতীয় সিঙ্গেল কোড স্নিপেট ব্যবহার করে সমস্ত ক্লিক ইভেন্টগুলিতে 300 মিমি দেরি থেকে মুক্তি পাওয়া :

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

এটা কি খারাপ / ভাল ধারণা?

Question 2

এখন কিছু মোবাইল ব্রাউজার আপনি ভিউপোর্টটি সেট করলে 300 এমএস ক্লিকের বিলম্বকে সরিয়ে দেয়। আপনার আর workaround ব্যবহার করার প্রয়োজন নেই।

<meta name="viewport" content="width=device-width, user-scalable=no">

এটি বর্তমানে অ্যান্ড্রয়েডের জন্য ক্রোম , অ্যান্ড্রয়েডের জন্য ফায়ারফক্স এবং আইওএসের জন্য সাফারি সমর্থিত

তবে আইওএস সাফারিতে , ডাবল-ট্যাপটি অদৃশ্যযোগ্য পৃষ্ঠাগুলিতে একটি স্ক্রোল অঙ্গভঙ্গি। যে কারণে তারা 300 মিমি বিলম্ব সরাতে পারবেন না । যদি তারা অদৃশ্যযোগ্য পৃষ্ঠাগুলিতে বিলম্ব সরিয়ে না ফেলতে পারে তবে তারা জুম্যাবল পৃষ্ঠাগুলিতে এটি অপসারণের সম্ভাবনা কম।

উইন্ডোজ ফোনগুলি অজম্য পৃষ্ঠাগুলিতে 300 মিমি বিলম্বও বজায় রাখে, তবে তাদের আইওএসের মতো বিকল্প অঙ্গভঙ্গি নেই তাই ক্রোমের মতো এই বিলম্বটি সরিয়ে দেওয়া তাদের পক্ষে সম্ভব।আপনি উইন্ডোজ ফোনে বিলম্বটি এটি ব্যবহার করে মুছে ফেলতে পারেন:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

সূত্র: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

আপডেট 2015 ডিসেম্বর

এখন অবধি, আইওএসের ওয়েবকিট এবং সাফারিগুলিতে একক ট্যাপগুলি লিঙ্ক বা বোতাম সক্রিয় করার আগে লোকগুলিকে ডাবল ট্যাপের সাথে পৃষ্ঠাগুলিতে জুম করতে দেয় তার আগে 350 মিমি দেরি হয়েছিল। Chrome সনাক্ত করতে কয়েক মাস আগেই একটি চৌকস অ্যালগরিদম ব্যবহার করে এটি পরিবর্তন করেছে এবং ওয়েবকিট একটি অনুরূপ পদ্ধতির সাথে অনুসরণ করবে । আর্টিকেলটি কিছু দুর্দান্ত অন্তর্দৃষ্টি দেয় যে কীভাবে ব্রাউজারগুলি স্পর্শ অঙ্গভঙ্গিতে কাজ করে এবং ব্রাউজারগুলি আজকের তুলনায় কীভাবে এত বেশি স্মার্ট হতে পারে।

আপডেট 2016 মার্চ

আইওএসের সাফারিতে, "দ্রুত-ট্যাপ" প্রতিক্রিয়া তৈরি করতে দ্বিতীয় ট্যাপ শনাক্ত করার জন্য 350 মিমি অপেক্ষা করার সময় সরানো হয়েছে। এটি এমন পৃষ্ঠাগুলির জন্য সক্ষম করা হয়েছে যা প্রস্থ = ডিভাইস-প্রস্থ বা ব্যবহারকারী-পরিমাপযোগ্য = না দিয়ে ভিউপোর্ট ঘোষণা করে। লেখকরা এখানেtouch-action: manipulation দলিল হিসাবে সিএসএস ব্যবহার করে ('স্টাইলিং ফাস্ট-ট্যাপ আচরণ' শিরোনামে নীচে স্ক্রোল করুন) এবং এখানে নির্দিষ্ট উপাদানগুলিতে দ্রুত-ট্যাপ আচরণের বিকল্প বেছে নিতে পারেন ।

Question 3

ফিনান্সিয়াল টাইমস দ্বারা নির্মিত এই প্লাগইন -ফাস্টিক ক্লিকটি এটি আপনার জন্য নিখুঁতভাবে করে!

ক্লিক ফাংশনের পরে যুক্ত event.stopPropagation();এবং / অথবা event.preventDefault();সরাসরি যুক্ত করা সত্ত্বেও তা নিশ্চিত করুন , অন্যথায় এটি আমার জন্য যেমন দ্বিগুণ হয়ে যেতে পারে, যেমন:

$("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});

Question 4

আমি জানি এটি পুরানো তবে আপনি কেবল ব্রাউজারে "টাচ" সমর্থিত কিনা তা পরীক্ষা করতে পারবেন না? তারপরে একটি ভেরিয়েবল তৈরি করুন যা হয় "স্পর্শ" বা "ক্লিক করুন" এবং সেই পরিবর্তনটিকে আপনার উপাদানটির সাথে আবদ্ধ হয়ে যাওয়া ইভেন্ট হিসাবে ব্যবহার করবেন?

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});

সুতরাং সেই কোড নমুনাটি ব্রাউজারে "স্পর্শ" ইভেন্ট সমর্থিত কিনা তা পরীক্ষা করে দেখুন এবং তা না হলে আমরা "ক্লিক" ইভেন্টটি ব্যবহার করি।

(সম্পাদনা করুন: "টাচেন্ড" "অনটচেন্ড" এ পরিবর্তিত হয়েছে)

Question 5

আমি হ্যামার.জেএস ( গিথুব পৃষ্ঠা) নামে একটি বিশাল জনপ্রিয় বিকল্প পেয়েছি যা আমি মনে করি এটি সেরা পদ্ধতির।

হামার.জেএস হ'ল ফাস্টক্লিক.জেএস (সর্বাধিক উত্সাহিত উত্তর) এর চেয়ে আরও সম্পূর্ণ বৈশিষ্ট্যযুক্ত টাচ লাইব্রেরি (অনেকগুলি সোয়াইপ কমান্ড রয়েছে)।

সতর্কতা অবলম্বন করুন: আপনি যখন হ্যামার.জেস বা ফাস্টক্লিক.জেএস ব্যবহার করেন তখন মোবাইল ডিভাইসে দ্রুত স্ক্রোলিং ইউআই লক করে দেয় up আপনার সাইটে যদি নিউজফিড থাকে বা এমন একটি ইন্টারফেস থাকে যেখানে ব্যবহারকারীরা প্রচুর পরিমাণে স্ক্রোল করছে (বেশিরভাগ ওয়েব অ্যাপ্লিকেশানের মতো মনে হবে) এটি একটি বড় সমস্যা। এই কারণে, আমি এই মুহূর্তে এই প্লাগইনগুলির কোনওটিই ব্যবহার করছি না।

Question 6

কোনওভাবে, জুম অক্ষম করা এই ছোট বিলম্বটিকে অক্ষম করে বলে মনে হচ্ছে। বোঝায়, ডাবল-ট্যাপ করার পরে আর দরকার নেই।

আমি কীভাবে একটি মোবাইল ওয়েব পৃষ্ঠায় জুম "অক্ষম" করতে পারি?

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

Question 7

দুর্ভাগ্যক্রমে এটি করার কোনও সহজ উপায় নেই। সুতরাং কেবল ব্যবহার touchstartবা touchendআপনাকে অন্যান্য সমস্যার সাথে ছেড়ে দেবে যেমন উদাহরণস্বরূপ কোনও বোতামে ক্লিক করার পরে কেউ স্ক্রল করা শুরু করে। আমরা কিছুক্ষণের জন্য জেপ্টো ব্যবহার করি এবং এমনকি এই সত্যিকারের ভাল কাঠামোর সাহায্যে কিছু সমস্যা এসেছে যা সময়ের সাথে সাথে এসেছিল। এগুলির মধ্যে অনেকগুলি বন্ধ রয়েছে তবে এটি সাধারণ সমাধানের ক্ষেত্র নয়।

লিঙ্কগুলিতে বিশ্বব্যাপী ক্লিকগুলি পরিচালনা করতে আমাদের কাছে এই সমাধান রয়েছে:

   $(document.body).
    on('tap', 'a',function (e) {
      var href = this.getAttribute('href');
      if (e.defaultPrevented || !href) { return; }
      e.preventDefault();
      location.href= href;
    }).
    on('click', 'a', function (e) {
      e.preventDefault();
    });

Question 8

আমি jquery এবং দ্রুত ক্লিক লাইব্রেরি ছাড়াই একটি সহজ উপায় অনুসন্ধান করেছি। এটি আমার পক্ষে কাজ করে:

var keyboard = document.getElementById("keyboard");
var buttons = keyboard.children;
var isTouch = ("ontouchstart" in window);
for (var i=0;i<buttons.length;i++) {
    if ( isTouch ) {
        buttons[i].addEventListener('touchstart', clickHandler, false);         
    } else {
        buttons[i].addEventListener('click', clickHandler, false);          
    }
}

Question 9

শুধু কিছু অতিরিক্ত তথ্য সরবরাহ করতে।

আইওএস 10 এ, <button>আমার পৃষ্ঠায় থাকা ধারাবাহিকভাবে ট্রিগার করা যায়নি। সবসময় একটি পিছনে ছিল।

আমি টাচ স্টার্ট / হাতুড়ি / ট্যাপজ / ক্লিকের পরিবর্তে টাচস্টার্ট দিয়ে চেষ্টা করেছি, সব ব্যর্থ হয়েছে।

আপডেট: কারণটি মনে হচ্ছে বোতামটি প্রান্তের খুব কাছাকাছি! এটি কেন্দ্রের কাছাকাছি যান এবং পিছিয়ে যান!

Question 10

আপনার স্পষ্টভাবে নিষ্ক্রিয় মোড ঘোষণা করার কথা :

window.addEventListener('touchstart', (e) => {

    alert('fast touch');

}, { passive : true});

Question 11

JQuery এ আপনি "টাচেন্ড" ইভেন্টটি বাঁধতে পারেন, ডাইনি ট্রিগার কোডটি সহজাতভাবে ট্যাপের পরে (কীবোর্ডে কীডাউন জাতীয়)। বর্তমান ক্রোম এবং ফায়ারফক্স ট্যাবলেট সংস্করণে পরীক্ষিত। আপনার টাচ স্ক্রিনের ল্যাপটপ এবং ডেস্কটপ ডিভাইসের জন্যও "ক্লিক করুন" ভুলবেন না।

jQuery('.yourElements').bind('click touchend',function(event){

    event.stopPropagation();
    event.preventDefault();

	// everything else
});

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