JQuery ব্যবহার করে আইপ্যাডের সাফারি ব্রাউজারে টাচ ইভেন্টগুলি সনাক্ত করা সম্ভব?
আমি একটি ওয়েব অ্যাপ্লিকেশনটিতে মাউসওভার এবং মাউসআউট ইভেন্টগুলি ব্যবহার করি। মাউসআউট এবং মাউসমোভের মতো ইভেন্ট না থাকায় আইপ্যাডের সাফারি ব্রাউজারের জন্য কি একই জাতীয় ইভেন্ট রয়েছে?
উত্তর:
কোর জিকিউরির স্পর্শ ইভেন্টগুলির জন্য বিশেষ কিছু নেই তবে আপনি নীচের ইভেন্টগুলি ব্যবহার করে সহজেই নিজের তৈরি করতে পারেন
উদাহরণস্বরূপ, touchmove
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);
এটি বেশিরভাগ ওয়েবকিট ভিত্তিক ব্রাউজারগুলিতে কাজ করে (অন্তর্ভুক্ত অ্যান্ড্রয়েড)।
আপনি যদি jQuery 1.7+ ব্যবহার করেন তবে এটি অন্য সমস্ত উত্তরগুলির চেয়েও সহজ।
$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });$('#whatever').on('touchstart click', function(){ /* do something... */ });
$('#whatever').on({ 'touchstart' : function(ev){}});, evস্পর্শগুলি (ছোঁয়া, টার্গেটটচ বা পরিবর্তিত স্পর্শগুলি) সম্পর্কে কোনও তথ্য আছে বলে মনে হয় না
ev.originalEvent।
সবচেয়ে সহজ পন্থা হ্যামার.জেএস এর মতো মাল্টিটুচ জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করা । তারপরে আপনি কোড লিখতে পারেন:
canvas
.hammer({prevent_default: true})
.bind('doubletap', function(e) { // And double click
// Zoom-in
})
.bind('dragstart', function(e) { // And mousedown
// Get ready to drag
})
.bind('drag', function(e) { // And mousemove when mousedown
// Pan the image
})
.bind('dragend', function(e) { // And mouseup
// Finish the drag
});
এবং আপনি চালিয়ে যেতে পারেন। এটি ট্যাপ, ডাবল ট্যাপ, সোয়াইপ, হোল্ড, ট্রান্সফর্ম (যেমন, চিমটি) এবং টেনে আনতে সহায়তা করে। সমতুল্য মাউস ক্রিয়া সংঘটন হওয়ার সাথে সাথে স্পর্শ ইভেন্টগুলিও আগুন দেয়, সুতরাং আপনাকে ইভেন্ট হ্যান্ডলারের দুটি সেট লেখার দরকার নেই। ওহ, এবং আপনি jQueryish পদ্ধতিতে আমার মতো লিখতে সক্ষম হতে চাইলে আপনার jQuery প্লাগইন দরকার।
টাচস্টার্ট বা একা টাচেন্ড ব্যবহার করা ভাল সমাধান নয়, কারণ আপনি পৃষ্ঠাটি স্ক্রোল করলে ডিভাইসটি এটি স্পর্শ হিসাবে বা ট্যাপ হিসাবে সনাক্ত করে। সুতরাং, একই সময়ে কোনও ট্যাপ এবং ইভেন্ট ক্লিক করার সর্বোত্তম উপায় হ'ল কেবল সেই স্পর্শ ইভেন্টগুলি সনাক্ত করা যা স্ক্রিনটি সরানো হচ্ছে না (স্ক্রোলিং)। এটি করার জন্য, কেবল আপনার আবেদনে এই কোডটি যুক্ত করুন:
$(document).on('touchstart', function() {
detectTap = true; // Detects all touch events
});
$(document).on('touchmove', function() {
detectTap = false; // Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
if (event.type == "click") detectTap = true; // Detects click events
if (detectTap){
// Here you can write the function or codes you want to execute on tap
}
});আমি এটি পরীক্ষা করেছি এবং এটি আইপ্যাড এবং আইফোনে আমার পক্ষে ভাল কাজ করে। এটি ট্যাপ সনাক্ত করে এবং সহজেই ট্যাপ এবং স্পর্শ স্ক্রোলটিকে আলাদা করতে পারে।
আপনি একাধিক ইভেন্ট ক্যাপচার করতে .on () ব্যবহার করতে পারেন এবং তারপরে স্ক্রিনের স্পর্শের জন্য পরীক্ষা করতে পারেন, যেমন:
$('#selector')
.on('touchstart mousedown', function(e){
e.preventDefault();
var touch = e.touches[0];
if(touch){
// Do some stuff
}
else {
// Do some other stuff
}
});.bindদেওয়া হয়। আপনার ব্যবহার করা উচিত.on
jQuery কোর এর বিশেষ কিছু নেই তবে আপনি jQuery মোবাইল ইভেন্ট পৃষ্ঠাতে বিভিন্ন স্পর্শ ইভেন্টগুলি সম্পর্কে পড়তে পারেন যা আইওএস ডিভাইসগুলি ছাড়াও অন্যান্যগুলিতেও কাজ করে।
তারা হ'ল:
এও লক্ষ করুন, স্ক্রোল ইভেন্টের সময় (মোবাইল ডিভাইসের স্পর্শের ভিত্তিতে) আইওএস ডিভাইসগুলি স্ক্রল করার সময় ডিওএম ম্যানিপুলেশনকে হিমশীতল করে।
আমি আমার প্রকল্পের জন্য কেবল টাচমোভ ব্যবহার সম্পর্কে কিছুটা উদ্বিগ্ন ছিলাম , যেহেতু যখন আপনার স্পর্শটি এক অবস্থান থেকে অন্য স্থানে চলে আসে (এবং প্রাথমিক স্পর্শে নয়) তখন কেবল আগুন লাগে। তাই আমি এটি টাচস্টার্টের সাথে সংযুক্ত করেছি এবং এটি প্রাথমিক স্পর্শ এবং যে কোনও আন্দোলনের জন্য খুব ভালভাবে কাজ করে বলে মনে হচ্ছে।
<script>
function doTouch(e) {
e.preventDefault();
var touch = e.touches[0];
document.getElementById("xtext").innerHTML = touch.pageX;
document.getElementById("ytext").innerHTML = touch.pageY;
}
document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);
</script>
X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
আমি মাত্র বেনমজোরের গিটিহাব জিকুয়ারি টাচ ইভেন্ট ইভেন্ট প্লাগইন jQuery এর 1.4 এবং 1.7+ সংস্করণ উভয়ের জন্য পরীক্ষা করেছি tested এটি হালকা ওজনের এবং উভয়ের সাথে পুরোপুরি কাজ করে onএবং bindস্পর্শ ইভেন্টগুলির একটি বিস্তৃত সেটকে সহায়তা প্রদান করার সময়।