কীভাবে 'টাচস্টার্ট' এবং 'ক্লিক' ইভেন্টগুলিকে আবদ্ধ করবেন তবে উভয়ের প্রতিক্রিয়া নেই?

198

আমি এমন একটি মোবাইল ওয়েব সাইটে কাজ করছি যা বিভিন্ন ডিভাইসে কাজ করতে পারে। এই মুহুর্তে যার যার মাথাব্যথা হ'ল সে হ'ল ব্ল্যাকবেরি।

আমাদের উভয় কীবোর্ড ক্লিকের পাশাপাশি স্পর্শ ইভেন্টগুলিকে সমর্থন করতে হবে।

আদর্শভাবে আমি কেবল ব্যবহার করব:

$thing.click(function(){...})

তবে আমরা যে বিষয়টি নিয়ে চলছি তা হ'ল এই ব্ল্যাকবেরি ডিভাইসের কয়েকটিতে স্পর্শের সময় থেকে এটি ক্লিককে ট্রিগার করতে খুব বিরক্তিকর বিলম্ব হয়।

পরিবর্তে টাচস্টার্ট ব্যবহারের প্রতিকারটি হ'ল:

$thing.bind('touchstart', function(event){...})

তবে আমি উভয় ইভেন্টকে কীভাবে বাঁধতে পারি, তবে কেবল একটি গুলি চালানো? কীবোর্ড ডিভাইসগুলির জন্য আমার এখনও ক্লিক ইভেন্টটি প্রয়োজন, তবে অবশ্যই আমি যদি কোনও টাচ ডিভাইস ব্যবহার করি তবে ক্লিক ইভেন্টটি ফায়ারিং করতে চাই না।

একটি বোনাস প্রশ্ন: এমনকি এটি করার মতো কোনও টাচস্টার্ট ইভেন্ট নেই এমন অতিরিক্ত ব্রাউজারগুলিও কি আছে? এটি গবেষণায়, দেখে মনে হচ্ছে যে ব্ল্যাকবেরি ওএস 5 টাচস্টার্ট সমর্থন করে না তাই সেই ব্রাউজারের জন্য ক্লিক ইভেন্টগুলিতে নির্ভর করতে হবে।

সংযোজন:

সম্ভবত আরও ব্যাপক প্রশ্ন হ'ল:

JQuery এর সাথে, একই বাইন্ডিংগুলির সাথে উভয় স্পর্শ ইন্টারঅ্যাকশন এবং মাউস ইন্টারঅ্যাকশন পরিচালনা করতে / সুপারিশ করা হয়?

আদর্শভাবে, উত্তর হ্যাঁ। যদি তা না হয় তবে আমার কাছে কিছু বিকল্প রয়েছে:

1) আমরা ডিভাইস সম্পর্কিত তথ্য পেতে ডাব্লুআরএফএল ব্যবহার করি যাতে আমাদের নিজস্ব ডিভাইসগুলির ম্যাট্রিক্স তৈরি করা যায়। ডিভাইসের উপর নির্ভর করে আমরা টাচস্টার্ট বা ক্লিক ব্যবহার করব।

২) জেএস এর মাধ্যমে ব্রাউজারে স্পর্শ সহায়তার জন্য সনাক্ত করুন (আমার এটি সম্পর্কে আরও কিছু গবেষণা করা দরকার তবে এটি মনে হয় এটি করণীয়)।

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

jquery  click  touchstart 
— ডিএ।
সূত্র
2
আপনার স্পর্শ যুক্তির পাশাপাশি আপনার নিজের ক্লিকের যুক্তি লেখার জন্য টাচস্টার্ট এবং স্পর্শ করার জন্য বাঁধাই করা ভাল। স্পর্শের জ্ঞান না থাকায় বিল্ট-ইন ক্লিক কলব্যাক।
— জাস্টিন 808
আমি নিশ্চিত না আমি অনুসরণ করছি, জাস্টিন। আমি কি এখনও একটি টাচ স্টার্ট এবং ইভেন্ট আবদ্ধ ক্লিক না?
— ডিএ
@ ডিএ - না, আপনি মোটেই .ক্লিক () কলব্যাকের সাথে আবদ্ধ হবেন না। আমি কয়েকটি সুডো কোডে একটি উত্তর লেখার চেষ্টা করব। বাস্তব কোডটি লেখার জন্য আমার কাছে কোনও টাচ ডিভাইস নেই:
— Justin808
আহ, তবে স্পষ্ট করে বলার জন্য, আমার এখনও ক্লিক ইভেন্টগুলি দরকার, কারণ সেখানে এই সাইটটিতে লোকেরা অ-টাচ ডিভাইস ব্যবহার করবে।
— ডিএ
2
ব্যবহার করা .bind('touchstart mouseup')এটি সমাধান করবে (নীচের মন্তব্যের একটি ভিত্তিতে)
— ওরিয়াদাম

উত্তর:

135

আপডেট : jQuery পয়েন্টার ইভেন্টস পলিফিল প্রকল্পটি যা আপনাকে মাউস এবং স্পর্শের মধ্যে চয়ন না করে ইভেন্টগুলিকে "পয়েন্টার" এ আবদ্ধ করতে দেয়।

উভয়কে আবদ্ধ করুন, তবে একটি পতাকা তৈরি করুন যাতে ফাংশনটি কেবলমাত্র 100 মাইল বা তার পরে একবার চালিত হয়।

var flag = false;
$thing.bind('touchstart click', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    // do something
  }

  return false
});
— Mottie
সূত্র
7
হুম ... এটি হ্যাকি মনে হচ্ছে, তবে এটি কার্যকর হতে পারে। ধরা পড়ল যে এই কয়েকটি ডিভাইসে এটি একটি লক্ষণীয় পিছনে ... সম্ভবত প্রায় এক সেকেন্ড ... যা দ্রুত ডিভাইসে অন্যদের জন্য বিরক্তিকর হবে।
— ডিএ
15
পরিবর্তে clickএটিকে ব্যবহার করার পরিবর্তে mousedown... সম্ভবত দীর্ঘ বিলম্ব হ'ল এর মধ্যে পার্থক্য mousedownএবং mouseupএটি কীভাবে clickনির্ধারিত হয়।
— মটি
7
আমি যে সমাধানটি দিয়েছিলাম সেটাই এটি। ধন্যবাদ! আমি যা করি তা হল আমি touchendক্লাস প্রয়োগ করে কোনও আইটেম পতাকাঙ্কিত করি touched। ক্লিক ইভেন্ট বলার আগে এই গুলি ছড়িয়ে পড়ে। আমি তারপরে একটি ক্লিক ইভেন্ট যুক্ত করব যা প্রথমে সেই শ্রেণীর অস্তিত্বের জন্য পরীক্ষা করে। যদি এটি সেখানে থাকে, তবে আমরা স্পর্শ ইভেন্টগুলিকে বহিস্কার বলে ধরে নিই এবং পরের মিথস্ক্রিয়াটির জন্য ক্লাসের নামটি 'রিসেট' করতে মুছে ফেলা ছাড়া আমরা ক্লিকের সাথে আর কিছুই করি না। যদি ক্লাসটি না থাকে তবে আমরা ধরে নিই যে তারা আইটেমটি ক্লিক করতে একটি কীবোর্ড ব্যবহার করেছে এবং সেখান থেকে ফাংশনটি ট্রিগার করে।
— ডিএ
7
আপনার সচেতন হওয়া উচিত যে বেশিরভাগ ফোন ব্রাউজারের ক্লিক ইভেন্টে 300 মিমি বিলম্ব হয়, সুতরাং আপনার মোছা কমপক্ষে 300 বাড়াতে হবে, 300 মিমি বিলম্ব ইস্যুতে এই নিবন্ধটি দেখুন । এটি মূলত "ডাবল ক্লিক টু জুম" কার্যকারিতা সক্ষম করার জন্য যা প্রথম দিকে আইফোনের দিনগুলিতে খুব গুরুত্বপূর্ণ বৈশিষ্ট্য ছিল, যখন বেশিরভাগ ওয়েব সাইটগুলি একটি বড় ডেস্কটপ স্ক্রিনে দেখার জন্য ডিজাইন করা হয়েছিল।
— অবাক
12
এই মুহূর্তে এই প্রশ্নটি প্রায় 100k বার দেখা হয়েছে। এটিকে এক অসাধারণ ব্যবহারের ক্ষেত্রে / সমস্যার মতো মনে হয়। যাইহোক, এই উত্তর এবং এটি এবং অন্যান্য অনুরূপ প্রশ্নের সমস্ত অন্যদের কাছে হ্যাক লাগছে। গুগল সলিউশনটি বেশিরভাগের চেয়ে আরও ভালভাবে চিন্তা করার পরেও মনে হয় এটি আরও শক্তিশালী হ্যাক। ক্লিক হ্যান্ডলারের মতো সাধারণ কোনও কিছুর জন্য মনে হয় সমাধানটি সহজ হওয়া উচিত। কেউ কি এই সমস্যার জন্য একটি নন-হ্যাক সমাধান খুঁজে পেয়েছে?
— জিঙ্গলেস্টুলা
73

এটি স্থিরকরণ যা আমি "তৈরি" করেছি এবং এটি ঘোস্টক্লিকটি বের করে এবং ফাস্টক্লিক প্রয়োগ করে। নিজে থেকে চেষ্টা করুন এবং এটি আপনার পক্ষে কাজ করে কিনা তা আমাদের জানান। 

$(document).on('touchstart click', '.myBtn', function(event){
        if(event.handled === false) return
        event.stopPropagation();
        event.preventDefault();
        event.handled = true;

        // Do your magic here

});
— রাফায়েল ফ্রেগোসো
সূত্র
2
হেলগাথেভিकिंग: jsbin.com/ijizat/25 জাভাস্ক্রিপ্টে টাচক্লিক নামে একটি ফাংশন রয়েছে যা উপরেরটি অন্তর্ভুক্ত করে।
— ম্যাট পার্কিনস
5
আমি এই প্রশ্নের উত্তরগুলির সমস্তটির এই পদ্ধতিটি সবচেয়ে বেশি পছন্দ করি কারণ এটি ক) ডিভাইস সক্ষমতার জন্য পরীক্ষা না করা এবং খ) সেটটাইমআউট ব্যবহার না করা। আমার অভিজ্ঞতায়, সেটটাইমআউট ব্যবহার করে এমন সমস্যার সমাধান বেশিরভাগ ক্ষেত্রে কার্যকর হতে পারে তবে ইভেন্টগুলির সময় মোটামুটি স্বেচ্ছাসেবী এবং ডিভাইস নির্দিষ্ট।
— itmequinn
7
এটি কাজ করবে না কারণ বেনামে ফাংশনে 'ইভেন্ট' পাশ করার পরে এটি সেই ফাংশনের মধ্যে একটি স্থানীয় অবজেক্টে পরিণত হয়, তাই ইভেন্টটি ট্রিগার হওয়ার সাথে সাথে প্রতিটি সময় event.handledসমান হবে undefined। এখানে একটি সমাধান রয়েছে: ব্যবহার করে লক্ষ্য উপাদানটিতে 'হ্যান্ডলড' পতাকাটি সেট করুন jQuery.data()।
— thdoan
3
আপনার কাছে event.stopPropagation();এবং event.preventDefault();আমার বোধ থেকে (এবং পরীক্ষা করা) ইভেন্টটি কেবল এটির সাথে একবারই চালানো যেতে পারে। তাহলে কেন চেক করবেন if(event.handled !== true)? আমার জন্য এটি প্রয়োজনীয় নয় বা আমি কিছু মিস করছি?
— এনবিআর
2
event.handledমান পরীক্ষা করা উচিত নয় true? যতদূর আমি বলতে পারি এটি কখনই নয় false। এটি হিসাবে শুরু হয় undefined, এবং তারপরে আপনি এটি সেট করা হয়েছে কিনা তা বলতে চান true।
— এসিজে
49

আপনি এরকম কিছু চেষ্টা করতে পারেন:

var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);
— swooter
সূত্র
5
আমি মনে করি যে এটির সাথে সমস্যাটি কি এটি ব্যবহারকারী যা করছেন তার চেয়ে বেশি ডিভাইস দক্ষতার পরীক্ষা করছে? চ্যালেঞ্জটি হ'ল আমাদের টাচ ডিভাইসগুলিতে সমর্থন করতে হবে যার
— কীবোর্ডও রয়েছে
8
এটি ভাল ধারণা নয় - মাউস ব্যবহার করার সময় কোনও টাচ স্ক্রিন এবং মাউস ব্যবহারকারীর জন্য ইভেন্টটি ভেঙে দেবে (টাচ স্ক্রিনযুক্ত ল্যাপটপগুলি বেশ সাধারণ হয়ে উঠছে)।
— ক্রিস্টিয়ান জে
1
এটি সম্পর্কিত দুর্দান্ত নিবন্ধ: hacks.mozilla.org/2013/04/…
— লুক মেলিয়া
উইন্ডোজ 8 সর্বদা 'টাচস্টার্ট' ইভেন্টটি ওয়্যার আপ করবে যদি এটি ব্যবহার করা হয় কারণ 'অনটচ স্টার্ট' এই ওএসের জন্য 'সত্য' ফিরে আসবে। সুতরাং, সম্ভবত আপনার উত্তরটি সত্যিকারের টাচস্ক্রিন ডিভাইসগুলিতে চলমান না থাকলে সবচেয়ে ভাল উত্তর নয় তবে এরপরে যদি এটি হয় তবে আপনার চেকের প্রয়োজন নেই।
— নীল মনরো
টাচ স্ক্রিনযুক্ত ল্যাপটপে ব্যবহারকারী ক্রোমে এই কোডটি ব্যবহার করে কোনও কিছুই ক্লিক করতে পারবেন না (কমপক্ষে ক্রোম 46)। আইই 11 যদিও কাজ করছে বলে মনে হচ্ছে।
— ডেভিড শেরেট
42

সাধারণত এটি পাশাপাশি কাজ করে:

$('#buttonId').on('touchstart click', function(e){
    e.stopPropagation(); e.preventDefault();
    //your code here

});
— জনাথন
সূত্র
8
@ জোনাথন ভুল, আপনি যদি নতুন jQuery সংস্করণ ব্যবহার করেন। লাইভটি 1.7 সংস্করণে অবচয় করা হয়েছিল।
— মাইক বারউইক
E.stopPropagation () দিয়েও আমি চেষ্টা করেছি (এবং আমি এটি অন্য কোথাও পড়েছি - আমার ধারণা নয়); e.preventDefault (); এবং এটি প্রায় কাজ করে (আমার জন্য) তবে আমি পরে আবিষ্কার করেছি যে এটি 20 বার পূর্বাভাস হিসাবে কাজ করে কিন্তু 1 বার নয়, সুতরাং এটি বুলেটপ্রুফ নয়। এখানে দেখুন: স্ট্যাকওভারফ্লো.com / প্রশ্নগুলি / 25671053/ … এই বিষয়ে আপনার মন্তব্যগুলির প্রশংসা করুন!
— গারাভানি
@ মাইকবারিক আপনি কি আপনার মন্তব্যটি ব্যাখ্যা করতে পারেন বা একটি লিঙ্ক দিতে পারেন যা এটির ব্যাখ্যা করে? তুমাকে অগ্রিম ধন্যবাদ.
— বিল্লাল বেগেরাদজ
22

ইভেন্টের ফাংশন return false;শেষে কেবল যুক্ত করা on("click touchstart")এই সমস্যার সমাধান করতে পারে।

$(this).on("click touchstart", function() {
  // Do things
  return false;
});

.On () এ jQuery ডকুমেন্টেশন থেকে

falseকোনও ইভেন্ট হ্যান্ডলার থেকে ফিরে আসা স্বয়ংক্রিয়ভাবে কল করবে event.stopPropagation()এবং event.preventDefault()। falseশর্টহ্যান্ড হিসাবে হ্যান্ডলারের জন্য একটি মানও পাস করা যেতে পারে function(){ return false; }।

— রায়
সূত্র
2
দুর্দান্ত কাজ করে, উভয়ের সাথেই ডিভাইসে একবারে আগুন জ্বলে ওঠে - এটি আমার কাছে সবচেয়ে কমপক্ষে হ্যাকি সমাধান হিসাবে মনে হচ্ছে
— অ্যাডাম কুপার
আমার পক্ষে সবচেয়ে ভাল কাজ করেছে এবং আসলে কেন তা বোঝায়।
— আমির 5000
এই কোন ডাউনসাইড? এত সহজ সমাধান কেন ব্যাপকভাবে জানা যায় না?
— ESR
10

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

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click');

  //your code here
});

আমার ক্ষেত্রে ক্লিক ইভেন্টটি একটি <a>উপাদানটির সাথে আবদ্ধ ছিল তাই আমাকে ক্লিকের বাইন্ডিংটি সরিয়ে ফেলতে হয়েছিল এবং ক্লিকের ইভেন্টটি পুনরায় ফিরিয়ে আনতে হয়েছিল যা <a>উপাদানটির জন্য ডিফল্ট ক্রিয়াটি রোধ করেছিল ।

$thing.on('touchstart click', function(event){
  if (event.type == "touchstart")
    $(this).off('click').on('click', function(e){ e.preventDefault(); });

  //your code here
});
— টিম
সূত্র
আমি আশা করি এটি যেমন ছিল তেমন কাজ করেছে, তবে তা হয় না। this (এটি) আপনি কী ভাবেন এটি ইঙ্গিত করে না।
— ডেভ লোয়ারের
8

আমি নিম্নলিখিত উপায় দ্বারা সফল।

সহজ কিছু...

$(this).on('touchstart click', function(e){
  e.preventDefault();
  //do your stuff here
});
— Hasanavi
সূত্র
4
ক্লিক এবং টাচস্টার্ট উভয়ই নিবন্ধভুক্ত ডিভাইসে দু'বার কি আগুন লাগবে না?
— ডিএ
8
দুঃখিত, আমি আপনাকে জানতে পেরেছি। হ্যাঁ আপনি ঠিক বলেছেন একটি স্পর্শ টাচস্টার্ট ইভেন্ট উত্পন্ন করবে এবং ইভেন্টটি ক্লিক করবে। একে বলা হয় ভুত ক্লিক। গুগল তার জন্য একটি সমাধান বাস্তবায়ন করেছে। সরাসরি এগিয়ে নাও পুরোপুরি কাজ করে। লিঙ্কটি এখানে। কোড.google.com/mobile/articles/رف
— ষ্ট_
2
তুচ্ছ হতে পারে তবে আপনি এতে eপ্যারামিটারটি মিস করছেনfunction()
— সমস্যা
@ হাসানভি এটি দুর্দান্ত সমাধান ছিল তবে .on ব্যবহার করে আমি আরও ভাল ফলাফল পেয়েছি
— নিল
1
ধন্যবাদ @ নীল। হ্যাঁ .on ব্যবহার করা ভাল ধারণা হিসাবে এটি ভবিষ্যতের সংস্করণে মুছে ফেলা হতে পারে। আমি আমার দৃষ্টিকোণকে বাঁধা থেকে বদলেছি।
— হাসনাভি
5

আমি বিশ্বাস করি যে সর্বোত্তম অনুশীলনটি এখন ব্যবহার করা:

$('#object').on('touchend mouseup', function () { });

touchend

স্পর্শ পৃষ্ঠ থেকে টাচ পয়েন্ট সরানো হলে স্পর্শকান্ড ইভেন্টটি বরখাস্ত করা হয়।

স্পর্শ ইভেন্টটি কোনও মাউসের ইভেন্টগুলি ট্রিগার করবে না ।

mouseup

মাউস পয়েন্টারটি উপাদানটির উপরে চলে গেলে মাউসআপ ইভেন্টটি একটি উপাদানকে পাঠানো হয় এবং মাউস বোতামটি প্রকাশিত হয়। যে কোনও এইচটিএমএল উপাদান এই ইভেন্টটি পেতে পারে।

মাউসআপ ইভেন্টটি কোনও স্পর্শ ইভেন্টকে ট্রিগার করবে না ।

EXAMPLE টি

$('#click').on('mouseup', function () { alert('Event detected'); });
$('#touch').on('touchend', function () { alert('Event detected'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="click">Click me</h1>
<h1 id="touch">Touch me</h1>
স্নিপেট প্রসারিত করুন

সম্পাদনা (2017)

২০১ 2017 সালের হিসাবে, ব্রাউজারগুলি ক্রোম দিয়ে শুরু হয় এবং ক্লিক ইভেন্টটি তৈরি করার দিকে পদক্ষেপ গ্রহণ করে .on("click") ক্লিকের অনুরোধগুলিতে ট্যাপ ইভেন্টগুলি দ্বারা উত্পন্ন বিলম্বকে সরিয়ে মাউস এবং স্পর্শ উভয়ের জন্য আরও সামঞ্জস্যপূর্ণ তৈরি করে।

এটি এই সিদ্ধান্তে পৌঁছায় যে কেবল ক্লিক ইভেন্ট ব্যবহার করে ফিরে আসাটাই সহজ সমাধান হবে এগিয়ে যাওয়া।

এটি ব্যবহারিক কিনা তা দেখার জন্য আমি এখনও কোনও ক্রস ব্রাউজার পরীক্ষা করিনি।

— DreamTeK
সূত্র
এটি আমার কাছে প্রতিশ্রুতিবদ্ধ বলে মনে হয়েছিল, তাই আমি এটির সাথে একগুচ্ছ গোলমাল করেছি, তবে শেষ পর্যন্ত আমার mouseupকাছে অনাকাঙ্ক্ষিত ফলাফলগুলি পাওয়া গেছে, বিশেষত যখন .তিহ্যবাহী মাউসের পরিবর্তে ট্র্যাকপ্যাড ব্যবহার করার সময়।
— স্কাইবন্ডসর
4

সাধারণত আপনি ডিফল্ট টাচ এবং নন-টাচ (ক্লিক) এপিআই মেশাতে চান না। একবার আপনি স্পর্শের বিশ্বে চলে গেলে কেবলমাত্র স্পর্শ সম্পর্কিত ফাংশনগুলির সাথে ডিল করা সহজ। নীচে কিছু সিউডো কোড রয়েছে যা আপনি এটি করতে চাইবেন।

আপনি যদি টাচমোভ ইভেন্টে সংযোগ স্থাপন করেন এবং অবস্থানগুলি ট্র্যাক করেন তবে আপনি অঙ্গভঙ্গি এবং কী নন তা সনাক্ত করতে আপনি ডটচলজিক ফাংশনে আরও আইটেম যুক্ত করতে পারেন।

var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), function() {
     var d = new Date();
     touchStartTime = d.getTime();
     touchStartLocation = mouse.location(x,y);
});

$thing.bind('touchend'), function() {
     var d = new Date();
     touchEndTime= d.getTime();
     touchEndLocation= mouse.location(x,y);
     doTouchLogic();
});

function doTouchLogic() {
     var distance = touchEndLocation - touchStartLocation;
     var duration = touchEndTime - touchStartTime;

     if (duration <= 100ms && distance <= 10px) {
          // Person tapped their finger (do click/tap stuff here)
     }
     if (duration > 100ms && distance <= 10px) {
          // Person pressed their finger (not a quick tap)
     }
     if (duration <= 100ms && distance > 10px) {
          // Person flicked their finger
     }
     if (duration > 100ms && distance > 10px) {
          // Person dragged their finger
     }
}
— Justin808
সূত্র
আমি মনে করি এটিই প্রশ্নটির মূল বিষয়: এটি একটি কোড বেস সহ উভয় মডেলকে চেষ্টা এবং সমর্থন করার পক্ষে কি বোধগম্য? আমি আমার প্রশ্নটি আরও কিছু পরিস্থিতিতে আপডেট করব।
— ডিএ
1
"সাধারণত আপনি ডিফল্ট টাচ এবং অ-টাচ মিশ্রিত করতে চান না" এটির পরে, আমি সম্মত। সমস্যাটি হ'ল তারা কী-বোর্ডগুলি সহ স্পর্শ ডিভাইসগুলি তৈরি করে রাখে যা আমাদের বিকাশকারীদের জন্য একটি মাথা ব্যথা।
— ডিএ
আমি সম্মত হই যে চূড়ান্ত জেএসের সিদ্ধান্ত স্পর্শ বা কোনও স্পর্শের শুরুতে এটি করা অনেক সহজ হবে। কী সহজ পৃথিবী হবে! কিন্তু এই সমস্ত জঘন্য ডিভাইসগুলি কি ক্লিক করুন এবং বুদ্ধিমান স্পর্শ করে? তাদের জন্য এই সমস্ত মাথাব্যথা হওয়া কি মূল্যবান? আমি কি নিজেকে জিজ্ঞাসা করি এই ভবিষ্যত?
— গারাভানি
ফাংশনগুলির একাধিক সংজ্ঞা দেওয়ার ধারণাটি আমি পছন্দ করি না। আমার সংস্থা বর্তমানে এমন একটি প্রকল্পে কাজ করছে যেখানে কোনও আইপ্যাড মোবাইল ডিভাইস হিসাবে বিশেষভাবে পরিচালিত হয় না এবং আপনার এখনও স্পর্শ ইভেন্টের প্রয়োজন। তবে টাচেন্ড সাধারণ ডেস্কটপ সংস্করণগুলিতে কাজ করে না। সুতরাং @Mottie এর সমাধানটি সেই দৃশ্যের জন্য একেবারে ঠিক।
— পিট
3

আচ্ছা ... এগুলি সবই জটিল জটিল।

আপনার যদি মডার্নিজার থাকে তবে এটি কোনও মস্তিষ্কের নয়।

ev = Modernizr.touch ? 'touchstart' : 'click';

$('#menu').on(ev, '[href="#open-menu"]', function(){
  //winning
});
— harelpls
সূত্র
2
আপনি কি তা ব্যাখ্যা করতে পারেন? আমি বিশ্বাস করি এটি ডিভাইস স্পর্শ সমর্থন করে কিনা এবং তা যদি ক্লিক না করে তবে এটি পরীক্ষা করে দেখুন। ক্যাচটি হ'ল (বা কমপক্ষে ছিলাম , যখন আমি প্রশ্নটি লিখেছিলাম) তা ছিল কিছু ডিভাইস উভয়কেই সমর্থন করে। এবং এই ডিভাইসে, আমার এখনও দুটি ইভেন্ট হ্যান্ডেল করা দরকার, কারণ ট্রিগারটি স্পর্শ বা ক্লিক থেকে আসতে পারে।
— ডিএ
2
আমি আরও কিছুটা ব্যাখ্যা দেওয়ার পরামর্শ দিচ্ছি।
— অ্যারন হল
2

আরও ভাল রক্ষণাবেক্ষণের জন্য আরেকটি বাস্তবায়ন। তবে এই কৌশলটি ইভেন্ট.স্টপপ্রোপেশন ()ও করবে। 100 মিমি ক্লিক করে অন্য কোনও উপাদানটিতে ক্লিক ধরা পড়ে না।

var clickObject = {
    flag: false,
    isAlreadyClicked: function () {
        var wasClicked = clickObject.flag;
        clickObject.flag = true;
        setTimeout(function () { clickObject.flag = false; }, 100);
        return wasClicked;
    }
};

$("#myButton").bind("click touchstart", function (event) {
   if (!clickObject.isAlreadyClicked()) {
      ...
   }
}
— ম্যাথিউ হামেল
সূত্র
2

কেবলমাত্র ডকুমেন্টেশনের উদ্দেশ্যে, আমি ডেস্কটপে সবচেয়ে দ্রুত / সর্বাধিক প্রতিক্রিয়াশীল ক্লিকের জন্য / মোবাইল সমাধানটিতে ট্যাপ করেছিলাম যা আমি ভাবতে পারি:

আমি jQuery এর onফাংশনটিকে একটি পরিবর্তিত সাথে প্রতিস্থাপন করেছি যা যখনই ব্রাউজারটি স্পর্শ ইভেন্টগুলিকে সমর্থন করে, আমার সমস্ত ক্লিক ইভেন্টগুলিকে টাচস্টার্ট দিয়ে প্রতিস্থাপন করে।

$.fn.extend({ _on: (function(){ return $.fn.on; })() });
$.fn.extend({
    on: (function(){
        var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
        return function( types, selector, data, fn, one ) {
            if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
            return this._on( types, selector, data, fn);
        };
    }()),
});

আগের তুলনায় ব্যবহার হুবহু হ'ল:

$('#my-button').on('click', function(){ /* ... */ });

তবে এটি উপলব্ধ হলে টাচস্টার্ট ব্যবহার করবে, যখন নেই তখন ক্লিক করুন। কোনও প্রকারের বিলম্বের প্রয়োজন নেই: ডি

— জেরসন গৌলার্ট
সূত্র
1
এর সাহায্যে ক্যাচগুলি এমন ডিভাইসগুলি হবে যা দুটি স্পর্শ এবং কীবোর্ডগুলিকে সমর্থন করে যেখানে আপনার উভয় ইন্টারঅ্যাকশন সামঞ্জস্য করা হচ্ছে তা নিশ্চিত করতে হবে।
— ডিএ
@ ডিএ ভাল পর্যবেক্ষণ। আপনি যদি কোনও স্পর্শ ইভেন্ট এর সাথে মিশ্রণ না করে থাকেন তবে কেবল ক্লিক ইভেন্টটি প্রতিস্থাপনের জন্য আমি একটি চেক যুক্ত করেছি। স্টিল প্রতিটি প্রকল্পের জন্য সমাধান হতে পারে না তবে আমি নিশ্চিত যে অনেকের পক্ষে এটি বেশ উপযুক্ত।
— জেরসন গৌলার্ট
2

আমি ontouchstartকখনই ট্রিগার করা হয়েছিল তা মুখস্থ করার ধারণাটি নিয়ে এসেছি । এই ক্ষেত্রে আমরা এমন একটি ডিভাইসে রয়েছি যা এটি সমর্থন করে এবং onclickইভেন্টটিকে উপেক্ষা করতে চাই । যেহেতু ontouchstartসর্বদা আগে ট্রিগার করা উচিত onclick, তাই আমি এটি ব্যবহার করছি:

<script> touchAvailable = false; </script>
<button ontouchstart="touchAvailable=true; myFunction();" onclick="if(!touchAvailable) myFunction();">Button</button>
স্নিপেট প্রসারিত করুন

— jakob.j
সূত্র
1
যেহেতু ব্যবহারকারীরা একই পৃষ্ঠার দর্শনকালে স্পর্শ এবং মাউস ব্যবহার করতে পারে, তাই এই স্নিপেটের সমস্যাটি হ'ল এটি প্রতি ইভেন্টের পরিবর্তে একবার স্পর্শের উপলভ্য পতাকাটিকে নিবন্ধভুক্ত করে। স্ট্যাকওভারফ্লো.com/ a/ 26145343/328272 এর jQuery প্লাগইনটি আপনার কোড হিসাবে একই কাজ করে তবে কোনও ইভেন্টের ভিত্তিতে এটি স্পর্শ বা মাউস দ্বারা ট্রিগার হয়েছিল কিনা তা একটি মাউস ইভেন্টের জন্য বলতে পারে। শুধু তাই নয়। ক্লিক ক্লিক করুন, তবে মাউস লেভে যা মাউসেনটারের পরে সেকেন্ড (বা মিনিট) পরে ট্রিগার হতে পারে (ফ্লাইআউট মেনুর জন্য আদর্শ যা মাউস ইশারা দিয়ে মাউসওভারে প্রসারিত হওয়া উচিত বা স্পর্শ ব্যবহারের সময় ক্লিক করুন)।
— lmeurs
2

আপনি এটির মতো চেষ্টা করতে পারেন:

var clickEvent = (('ontouchstart' in document.documentElement)?'touchstart':'click');
$("#mylink").on(clickEvent, myClickHandler);
— স্কাই ইপ
সূত্র
স্পর্শ এবং মাউস সমর্থন করে এমন ডিভাইসগুলির সম্পর্কে কী
— ওয়াললে সিরিল
2

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

jQuery(document).on('mouseup keydown touchend', function (event) {
var eventType = event.type;
if (eventType == 'touchend') {
    jQuery(this).off('mouseup');
}
});

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

— পেপিতা রন্ডেরোস
সূত্র
1

এটি আমার পক্ষে কাজ করেছে, মোবাইল উভয়ের কথা শোনে, তাই এটির প্রতিরোধ করুন, যা স্পর্শ ইভেন্ট। ডেস্কটপ শুধুমাত্র মাউস শুনতে।

 $btnUp.bind('touchstart mousedown',function(e){
     e.preventDefault();

     if (e.type === 'touchstart') {
         return;
     }

     var val = _step( _options.arrowStep );
               _evt('Button', [val, true]);
  });
— লেবার্ন সোবোটকার
সূত্র
1

আমার পক্ষে মটিয়ের দেওয়া সেরা উত্তর হিসাবে আমি কেবল তার কোডটি আরও পুনরায় ব্যবহারযোগ্য করার চেষ্টা করছি, সুতরাং এটি আমার অবদান:

bindBtn ("#loginbutton",loginAction);

function bindBtn(element,action){

var flag = false;
$(element).bind('touchstart click', function(e) {
    e.preventDefault();
    if (!flag) {
        flag = true;
        setTimeout(function() {
            flag = false;
        }, 100);
        // do something
        action();
    }
    return false;
});
— আরকো ভোলটাইকো
সূত্র
0

আমি একটি অ্যান্ড্রয়েড / আইপ্যাড ওয়েব অ্যাপ্লিকেশনটিতেও কাজ করছি, এবং মনে হচ্ছে কেবল "টাচমোভ" ব্যবহার করা "উপাদানগুলি সরানোর" জন্য যথেষ্ট (কোনও টাচস্টার্টের প্রয়োজন নেই)। টাচস্টার্টটি অক্ষম করে আপনি। ক্লিক ক্লিক করতে পারেন (); jQuery থেকে। এটি আসলে কাজ করছে কারণ এটি টাচস্টার্ট দ্বারা ওভারলোড করা হয়নি।

শেষ অবধি, আপনি .live বিন্যাস করতে পারেন ("টাচস্টার্ট", ​​ফাংশন (ই) {ই.স্টপপ্রসারণ ();}); টাচস্টার্ট ইভেন্টটিকে প্রচার বন্ধ করতে জিজ্ঞাসা করুন, লিভিং রুমে ট্রিগার করতে ক্লিক করুন ()।

এটা আমার জন্য কাজ করেছে।

— nembleton
সূত্র
আপনি কিভাবে অক্ষম করবেন touchstart?
— punkrockbuddyholly
আমি বিশ্বাস করি যে আপনি "যেমন" কিছু করতে পারেন: jQuery ("# ​​মাই_এলিমেন্ট") on
— নিমপ্লেটন
0

এই সমস্যাটি সমাধান করার চেষ্টা করার সময় অনেকগুলি বিষয় বিবেচনা করতে হবে। বেশিরভাগ সমাধান হয় স্ক্রোলিং ভঙ্গ করে বা ভূত ক্লিক ইভেন্টগুলি সঠিকভাবে পরিচালনা করে না।

সম্পূর্ণ সমাধানের জন্য দেখুন https://developers.google.com/mobile/articles/ ব্রেকফাস্ট_

এনবি: আপনি প্রতি-উপাদান ভিত্তিতে ভূত ক্লিক ইভেন্টগুলি পরিচালনা করতে পারবেন না। একটি বিলম্বিত ক্লিকটি স্ক্রিনের অবস্থান দ্বারা বরখাস্ত করা হয়েছে, সুতরাং যদি আপনার স্পর্শ ইভেন্টগুলি কোনওভাবে পৃষ্ঠা পরিবর্তন করে তবে ক্লিক ইভেন্টটি পৃষ্ঠার নতুন সংস্করণে প্রেরণ করা হবে।

— SystemParadox
সূত্র
0

ইভেন্টগুলিতে বরাদ্দ করা 'touchstart mousedown'বা 'touchend mouseup'ব্যবহারের অনাকাঙ্ক্ষিত পার্শ্ব-প্রতিক্রিয়া এড়াতে এটি কার্যকর হতে পারে click।

— স্টিভেন লু
সূত্র
0

ক্লিকটি সর্বদা একটি স্পর্শ ইভেন্ট অনুসরণ করবে এই সুবিধা গ্রহণ করে, টাইমআউট বা বৈশ্বিক পতাকা ব্যবহার না করেই "ভূত ক্লিক" থেকে মুক্তি পেতে আমি যা করেছি তা এখানে।

$('#buttonId').on('touchstart click', function(event){
    if ($(this).data("already")) {
        $(this).data("already", false);
        return false;
    } else if (event.type == "touchstart") {
        $(this).data("already", true);
    }
    //your code here
});

মূলত যখনই কোনও ontouchstartইভেন্ট এলিমেন্টে আগুন লাগে, ক্লিক আসে তখন একটি সেট একটি পতাকা এবং তারপরে মুছে ফেলা হয় (এবং উপেক্ষা করা হয়)।

— BigMacAttack
সূত্র
0

JQuery ইভেন্ট এপিআই ব্যবহার করবেন না কেন?

http://learn.jquery.com/events/event-extensions/

আমি এই সাধারণ ঘটনাটি সাফল্যের সাথে ব্যবহার করেছি। এটি পরিষ্কার, নাম স্পেসেবল এবং উন্নতি করার পক্ষে যথেষ্ট নমনীয়।

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var eventType = isMobile ? "touchstart" : "click";

jQuery.event.special.touchclick = {
  bindType: eventType,
  delegateType: eventType
};
— mdbiscan
সূত্র
1
ব্যবহারকারী এজেন্ট স্নিফিংয়ের মাধ্যমে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।
— জিঙ্গলেস্তুলা
ক্যাচটি এমন ডিভাইস যা স্পর্শ এবং ক্লিক উভয় সমর্থন করে।
— ডিএ
0

আপনি যদি jQuery ব্যবহার করে থাকেন তবে নীচেরগুলি আমার জন্য বেশ ভালভাবে কাজ করেছে:

var callback; // Initialize this to the function which needs to be called

$(target).on("click touchstart", selector, (function (func){
    var timer = 0;
    return function(e){
        if ($.now() - timer < 500) return false;
        timer = $.now();
        func(e);
    }
})(callback));

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

একই পরিস্থিতিতে কাউকে সাহায্য করতে পারে!

— ইউসুফ ভাভরাওয়ালা
সূত্র
0

সাধারণ বৈশিষ্ট্যগুলির জন্য, কেবল স্পর্শকে চিহ্নিত করুন বা ক্লিক করুন আমি নিম্নলিখিত কোডটি ব্যবহার করি:

var element = $("#element");

element.click(function(e)
{
  if(e.target.ontouchstart !== undefined)
  {
    console.log( "touch" );
    return;
  }
  console.log( "no touch" );
});

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

— রডরিগো
সূত্র
0

আমি এটি চেষ্টা করছি এবং এখনও অবধি এটি কাজ করে (তবে আমি কেবল অ্যান্ড্রয়েড / ফোনগ্যাপেই আছি তাই ক্যাভেট এমপোটার)

  function filterEvent( ob, ev ) {
      if (ev.type == "touchstart") {
          ob.off('click').on('click', function(e){ e.preventDefault(); });
      }
  }
  $('#keypad').on('touchstart click', '.number, .dot', function(event) {
      filterEvent( $('#keypad'), event );
      console.log( event.type );  // debugging only
           ... finish handling touch events...
  }

আমি এই স্পর্শটি পছন্দ করি না যে আমি প্রতিটি স্পর্শে পুনরায় বাধ্যতামূলক হ্যান্ডলারগুলি করছি, তবে সমস্ত কিছু স্পর্শ হিসাবে বিবেচিত হয় না (কম্পিউটারের সময়!)

'# কিপ্যাড'-এর মতো আমার কাছে প্রচুর হ্যান্ডলারের একটি সাধারণ ফাংশন রয়েছে যা আমাকে খুব বেশি কোড ছাড়াই সমস্যার সাথে মোকাবিলা করতে দেয় যে কারণ আমি এই পথে চলেছি।

— ডেভ লোরে
সূত্র
0

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

jQuery প্লাগইন: টাচ বা মাউস

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

এই উপায়টি ওপিকে ব্যবহার করতে পারে touchstartবা touchendস্পর্শ ক্লিকগুলিতে দ্রুত প্রতিক্রিয়া জানাতে এবং কেবলclick ক্লিকগুলির জন্য একটি মাউস দ্বারা ।

প্রদর্শন

প্রথমে একটি করতে হবে। শরীরের উপাদান ট্র্যাক স্পর্শ ইভেন্ট:

$(document.body).touchOrMouse('init');

মাউস ইভেন্টগুলি ডিফল্ট উপায়ে আমাদের উপাদানগুলিতে আবদ্ধ এবং কল করে $body.touchOrMouse('get', e)আমরা জানতে পারি যে ইভেন্টটি কোনও টাচস্ক্রিন বা মাউস দ্বারা চালিত হয়েছিল whether

$('.link').click(function(e) {
  var touchOrMouse = $(document.body).touchOrMouse('get', e);

  if (touchOrMouse === 'touch') {
    // Handle touch click.
  }
  else if (touchOrMouse === 'mouse') {
    // Handle mouse click.
  }
}

Http://jsfiddle.net/lmeurs/uo4069nh এ কাজের প্লাগইনটি দেখুন ।

ব্যাখ্যা

  1. এই প্লাগইনটি অর্থাৎ কল করা দরকার। শরীরের উপাদান ট্র্যাক করতে touchstartএবং touchendইভেন্টগুলি, এইভাবে touchendইভেন্টটি ট্রিগার উপাদানগুলিতে (যেমন একটি লিঙ্ক বা বোতাম) নিক্ষেপ করতে হবে না। এই দুটি স্পর্শ ইভেন্টের মধ্যে এই প্লাগইনটি কোনও মাউসের ইভেন্টটিকে স্পর্শের দ্বারা আহ্বান করা বিবেচনা করে।
  2. মাউস ইভেন্টগুলি কেবল touchendতখনই চালিত হয় , যখন মাউস ইভেন্টটি পরে ghostEventDelay(বিকল্প, 1000 মিমি ডিফল্ট) এর মধ্যে চালিত হয়touchend , এই প্লাগইনটি মাউস ইভেন্টটিকে বলে বিবেচনা করে।
  3. টাচস্ক্রিন ব্যবহার করে কোনও উপাদানটিতে ক্লিক করার সময়, উপাদানটি :activeরাষ্ট্রটি অর্জন করে । mouseleaveপরে উপাদান অর্থাত এই রাষ্ট্র হারায় ঘটনা শুধুমাত্র বহিস্কার করা হয়। অন্য উপাদানটিতে ক্লিক করা। যেহেতু mouseenterঘটনাটি সরিয়ে দেওয়ার পরে এটি সেকেন্ড (বা মিনিট!) হতে পারে , সুতরাং এই প্লাগইনটি কোনও উপাদানটির শেষ mouseenterইভেন্টের উপর নজর রাখে : যদি শেষ mouseenterইভেন্টটি স্পর্শ দ্বারা আহ্বান করা হত, নিম্নলিখিত mouseleaveইভেন্টটিকে স্পর্শ করেও আহ্বান করা হয় বলে মনে করা হয়।
— lmeurs
সূত্র
0

এটি করার একটি সহজ উপায় এখানে:

// A very simple fast click implementation
$thing.on('click touchstart', function(e) {
  if (!$(document).data('trigger')) $(document).data('trigger', e.type);
  if (e.type===$(document).data('trigger')) {
    // Do your stuff here
  }
});

আপনি মূলত প্রথম ইভেন্ট প্রকারটি সংরক্ষণ করুন যা মূল ডকুমেন্টের সাথে সংযুক্ত জ্যাকুয়েরির ডেটা অবজেক্টে 'ট্রিগার' বৈশিষ্ট্যে ট্রিগার হয় এবং কেবল তখনই সঞ্চালিত হয় যখন ইভেন্টের ধরণটি 'ট্রিগার' এর মানের সমান হয়। টাচ ডিভাইসগুলিতে ইভেন্ট চেইনটি সম্ভবত 'ক্লিক' এর পরে 'টাচস্টার্ট' হবে; তবে, 'ক্লিক' হ্যান্ডলারটি কার্যকর করা হবে না কারণ "ক্লিক" "ট্রিগার" ("টাচস্টার্ট") এ সংরক্ষিত প্রাথমিক ইভেন্ট প্রকারের সাথে মেলে না।

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

আপনি এখানে চারপাশে খেলতে পারবেন এমন একটি কোডপেন রয়েছে (কোনও টাচ ডিভাইসে বোতামটি ট্যাপ করার চেষ্টা করুন - কোনও ক্লিকের দেরি হওয়া উচিত নয়): http://codepen.io/thdoan/pen/xVVrOZ

আমি এটিকে একটি সরল jQuery প্লাগইন হিসাবে প্রয়োগ করেছি যা একটি নির্বাচক স্ট্রিং পেরিয়ে jQuery এর বংশধরদের ফিল্টারিং সমর্থন করে:

// A very simple fast click plugin
// Syntax: .fastClick([selector,] handler)
$.fn.fastClick = function(arg1, arg2) {
  var selector, handler;
  switch (typeof arg1) {
    case 'function':
      selector = null;
      handler = arg1;
      break;
    case 'string':
      selector = arg1;
      if (typeof arg2==='function') handler = arg2;
      else return;
      break;
    default:
      return;
  }
  this.on('click touchstart', selector, function(e) {
    if (!$(document).data('trigger')) $(document).data('trigger', e.type);
    if (e.type===$(document).data('trigger')) handler.apply(this, arguments);
  });
};

কোডপেন: http://codepen.io/thdoan/pen/GZrBdo/

— thdoan
সূত্র
আপনি কেন কেবল ভেরিয়েবল ব্যবহার না করে ডকুমেন্টে একটি ডেটা সম্পত্তি ব্যবহার করলেন?
— রাফেল শোয়েকার্ট
@ রাফেলশ্বেইয়ের্ট সম্ভবত সম্ভবত অভ্যাসের বাইরে। কোনও সঠিক বা ভুল উপায় নেই, তবে আমি এমন $.data()ডেটা সঞ্চয় করতে ব্যবহার করতে চাই যা একাধিক ফাংশন দ্বারা অ্যাক্সেস করা যায় তবে বৈশ্বিক পরিধিগুলির মধ্যে নেই। একটি প্লাস হ'ল যেহেতু আমি এটি একটি উপাদানটিতে সঞ্চয় করছি এটি স্বাভাবিকভাবেই আমাকে আরও প্রসঙ্গ সরবরাহ করে।
— thordan
0

আমি যে সর্বোত্তম পদ্ধতিটি খুঁজে পেয়েছি তা হ'ল টাচ ইভেন্ট লিখুন এবং সেই ইভেন্টটি প্রোগ্রামটিকে সাধারণ ক্লিক ইভেন্টকে কল করুন। এইভাবে আপনার সমস্ত সাধারণ ক্লিক ইভেন্ট থাকে এবং তারপরে সমস্ত স্পর্শ ইভেন্টের জন্য আপনাকে কেবল একটি ইভেন্ট হ্যান্ডলার যুক্ত করতে হবে। প্রতিটি নোডের জন্য আপনি স্পর্শযোগ্য করতে চান, টাচ হ্যান্ডলারের অনুরোধ জানাতে কেবল "স্পর্শযোগ্য" শ্রেণীর সাথে এটি যুক্ত করুন। জ্যাকুরির সাথে এটি কোনও আসল স্পর্শ ইভেন্ট নয় এবং কোনও মিথ্যা ইতিবাচক নয় তা নিশ্চিত করার জন্য কিছু যুক্তির সাথে এ জাতীয় কাজ করে।

$("body").on("touchstart", ".touchable", function() { //make touchable  items fire like a click event
var d1 = new Date();
var n1 = d1.getTime();
setTimeout(function() {
    $(".touchable").on("touchend", function(event) {
        var d2 = new Date();
        var n2 = d2.getTime();
        if (n2 - n1 <= 300) {
            $(event.target).trigger("click"); //dont do the action here just call real click handler
        }
    });
}, 50)}).on("click", "#myelement", function() {
//all the behavior i originally wanted
});
— mahatrsna
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.