আপনার সাইটে স্পর্শ যোগ করুন

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

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

উপাদান অবস্থার প্রতিক্রিয়া

আপনি কি কখনও একটি ওয়েব পৃষ্ঠায় একটি উপাদান স্পর্শ করেছেন বা ক্লিক করেছেন এবং প্রশ্ন করেছেন যে সাইটটি আসলে এটি সনাক্ত করেছে কিনা?

ব্যবহারকারীরা আপনার UI এর কিছু অংশ স্পর্শ করে বা ইন্টারঅ্যাক্ট করার সাথে সাথে একটি উপাদানের রঙ পরিবর্তন করা একটি মৌলিক আশ্বাস দেয় যে আপনার সাইট কাজ করছে। এটি শুধুমাত্র হতাশা দূর করে না, এটি একটি চটকদার এবং প্রতিক্রিয়াশীল অনুভূতিও দিতে পারে।

DOM উপাদানগুলি নিম্নলিখিত যেকোন অবস্থার উত্তরাধিকারী হতে পারে: ডিফল্ট, ফোকাস, হোভার এবং সক্রিয়। এই রাজ্যগুলির প্রতিটির জন্য আমাদের UI পরিবর্তন করতে, আমাদের নিম্নলিখিত ছদ্ম ক্লাসে শৈলী প্রয়োগ করতে হবে :hover , :focus এবং :active নীচে দেখানো হয়েছে:

.btn {
  background-color: #4285f4;
}

.btn:hover {
  background-color: #296cdb;
}

.btn:focus {
  background-color: #0f52c1;

  /* The outline parameter suppresses the border
  color / outline when focused */
  outline: 0;
}

.btn:active {
  background-color: #0039a8;
}

চেষ্টা করে দেখুন

বেশিরভাগ মোবাইল ব্রাউজারে হভার এবং/অথবা ফোকাস স্টেটগুলি একটি উপাদান ট্যাপ করার পরে প্রযোজ্য হবে।

আপনি কী স্টাইল সেট করেছেন এবং ব্যবহারকারীরা তাদের স্পর্শ শেষ করার পরে সেগুলি কীভাবে দেখবে তা সাবধানে বিবেচনা করুন।

ডিফল্ট ব্রাউজার শৈলী দমন করা

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

বেশিরভাগ ব্রাউজার একটি উপাদান ফোকাস করা হলে একটি উপাদানের চারপাশে একটি রিং প্রদর্শন করতে outline CSS বৈশিষ্ট্য ব্যবহার করে। আপনি এটি দিয়ে দমন করতে পারেন:

.btn:focus {
    outline: 0;

    /* Add replacement focus styling here (i.e. border) */
}

সাফারি এবং ক্রোম একটি ট্যাপ হাইলাইট রঙ যোগ করে যা -webkit-tap-highlight-color সিএসএস বৈশিষ্ট্য দিয়ে প্রতিরোধ করা যেতে পারে:

/* Webkit / Chrome Specific CSS to remove tap
highlight color */
.btn {
  -webkit-tap-highlight-color: transparent;
}

চেষ্টা করে দেখুন

উইন্ডোজ ফোনে ইন্টারনেট এক্সপ্লোরার একটি অনুরূপ আচরণ আছে, কিন্তু একটি মেটা ট্যাগের মাধ্যমে দমন করা হয়:

<meta name="msapplication-tap-highlight" content="no">

ফায়ারফক্স পরিচালনার জন্য দুটি পার্শ্ব প্রতিক্রিয়া আছে।

-moz-focus-inner সিউডো ক্লাস, যা স্পর্শযোগ্য উপাদানগুলিতে একটি রূপরেখা যোগ করে, আপনি border: 0 ।

আপনি যদি ফায়ারফক্সে একটি <button> উপাদান ব্যবহার করেন, তাহলে আপনি একটি গ্রেডিয়েন্ট প্রয়োগ করেন, যা আপনি background-image: none ।

/* Firefox Specific CSS to remove button
differences and focus ring */
.btn {
  background-image: none;
}

.btn::-moz-focus-inner {
  border: 0;
}

চেষ্টা করে দেখুন

ব্যবহারকারী-নির্বাচন অক্ষম করা হচ্ছে

আপনি যখন আপনার UI তৈরি করছেন তখন এমন পরিস্থিতি হতে পারে যেখানে আপনি ব্যবহারকারীদের আপনার উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করতে চান তবে আপনি দীর্ঘক্ষণ প্রেসে পাঠ্য নির্বাচন করার বা আপনার UI এর উপর একটি মাউস টেনে নেওয়ার ডিফল্ট আচরণকে দমন করতে চান।

আপনি user-select CSS সম্পত্তির সাথে এটি করতে পারেন, তবে সতর্ক থাকুন যে বিষয়বস্তুতে এটি করা ব্যবহারকারীদের জন্য অত্যন্ত বিরক্তিকর হতে পারে যদি তারা উপাদানটিতে পাঠ্য নির্বাচন করতে চান । সুতরাং আপনি এটি সতর্কতার সাথে এবং সংযতভাবে ব্যবহার করছেন তা নিশ্চিত করুন।

/* Example: Disable selecting text on a paragraph element: */
p.disable-text-selection {
  user-select: none;
}

কাস্টম অঙ্গভঙ্গি প্রয়োগ করুন

আপনার সাইটের জন্য কাস্টম ইন্টারঅ্যাকশন এবং অঙ্গভঙ্গি সম্পর্কে আপনার ধারণা থাকলে, দুটি বিষয় মাথায় রাখতে হবে:

1. কিভাবে সব ব্রাউজার সাপোর্ট করবেন।
2. কীভাবে আপনার ফ্রেম রেট বেশি রাখবেন।

এই নিবন্ধে, আমরা সমস্ত ব্রাউজারে আঘাত করার জন্য আমাদের যে API-কে সমর্থন করতে হবে তা কভার করে এবং তারপরে আমরা কীভাবে এই ইভেন্টগুলিকে দক্ষতার সাথে ব্যবহার করি তা কভার করব।

আপনি আপনার অঙ্গভঙ্গি কি করতে চান তার উপর নির্ভর করে, আপনি সম্ভবত চান যে ব্যবহারকারী একবারে একটি উপাদানের সাথে ইন্টারঅ্যাক্ট করুক বা আপনি চাইবেন যে তারা একই সময়ে একাধিক উপাদানের সাথে ইন্টারঅ্যাক্ট করতে সক্ষম হোক।

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

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

এটি দরকারী কারণ এটি ব্যবহারকারীর জন্য প্রচুর নমনীয়তা প্রদান করে, তবে ব্যবহারকারী কীভাবে আপনার UI এর সাথে ইন্টারঅ্যাক্ট করতে পারে তার উপর একটি সীমাবদ্ধতা প্রয়োগ করে৷

যাইহোক, যদি আপনি আশা করেন যে ব্যবহারকারীরা একই সময়ে একাধিক উপাদানের সাথে ইন্টারঅ্যাক্ট করবে (মাল্টি-টাচ ব্যবহার করে), তাহলে আপনার স্পর্শটিকে নির্দিষ্ট উপাদানে সীমাবদ্ধ করা উচিত।

এটি ব্যবহারকারীদের জন্য আরও নমনীয়, কিন্তু UI-কে ম্যানিপুলেট করার জন্য যুক্তিকে জটিল করে তোলে এবং ব্যবহারকারীর ত্রুটির জন্য কম স্থিতিস্থাপক।

ইভেন্ট শ্রোতা যোগ করুন

ক্রোমে (সংস্করণ 55 এবং পরবর্তী), ইন্টারনেট এক্সপ্লোরার এবং এজ, PointerEvents কাস্টম অঙ্গভঙ্গি বাস্তবায়নের জন্য প্রস্তাবিত পদ্ধতি।

অন্যান্য ব্রাউজারে TouchEvents এবং MouseEvents হল সঠিক পদ্ধতি।

PointerEvents -এর দুর্দান্ত বৈশিষ্ট্য হল এটি মাউস, টাচ এবং পেন ইভেন্ট সহ একাধিক ধরণের ইনপুটকে কলব্যাকের একটি সেটে একত্রিত করে। যে ইভেন্টগুলির জন্য শুনতে হবে তা হল pointerdown , pointermove , pointerup এবং pointercancel ।

অন্যান্য ব্রাউজারে সমতুল্য হল টাচ ইভেন্টের জন্য touchstart , touchmove , touchend এবং touchcancel এবং আপনি যদি মাউস ইনপুটের জন্য একই অঙ্গভঙ্গি বাস্তবায়ন করতে চান তাহলে আপনাকে mousedown , mousemove এবং mouseup প্রয়োগ করতে হবে।

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

এই ইভেন্টগুলি ব্যবহার করার জন্য একটি ইভেন্টের নাম, একটি কলব্যাক ফাংশন এবং একটি বুলিয়ান সহ একটি DOM উপাদানে addEventListener() পদ্ধতিতে কল করা প্রয়োজন৷ বুলিয়ান নির্ধারণ করে যে আপনার ইভেন্টটি ধরা উচিত কিনা তার আগে বা পরে অন্যান্য উপাদানের ইভেন্টগুলি ধরা এবং ব্যাখ্যা করার সুযোগ ছিল। ( true মানে আপনি অন্যান্য উপাদানের আগে ইভেন্টটি চান।)

এখানে একটি মিথস্ক্রিয়া শুরু করার জন্য শোনার একটি উদাহরণ।

// Check if pointer events are supported.
if (window.PointerEvent) {
  // Add Pointer Event Listener
  swipeFrontElement.addEventListener('pointerdown', this.handleGestureStart, true);
  swipeFrontElement.addEventListener('pointermove', this.handleGestureMove, true);
  swipeFrontElement.addEventListener('pointerup', this.handleGestureEnd, true);
  swipeFrontElement.addEventListener('pointercancel', this.handleGestureEnd, true);
} else {
  // Add Touch Listener
  swipeFrontElement.addEventListener('touchstart', this.handleGestureStart, true);
  swipeFrontElement.addEventListener('touchmove', this.handleGestureMove, true);
  swipeFrontElement.addEventListener('touchend', this.handleGestureEnd, true);
  swipeFrontElement.addEventListener('touchcancel', this.handleGestureEnd, true);

  // Add Mouse Listener
  swipeFrontElement.addEventListener('mousedown', this.handleGestureStart, true);
}

চেষ্টা করে দেখুন

একক-উপাদান মিথস্ক্রিয়া পরিচালনা করুন

উপরের কোডের সংক্ষিপ্ত স্নিপেটে আমরা শুধুমাত্র মাউস ইভেন্টের জন্য প্রারম্ভিক ইভেন্ট লিসেনার যোগ করেছি। এর কারণ হল যে মাউস ইভেন্টগুলি তখনই ট্রিগার করবে যখন কার্সারটি ইভেন্ট শ্রোতার যোগ করা উপাদানটির উপর ঘোরাফেরা করবে।

TouchEvents শুরু হওয়ার পরে একটি অঙ্গভঙ্গি ট্র্যাক করবে যেখানে স্পর্শ ঘটবে তা নির্বিশেষে এবং PointerEvents ইভেন্টগুলিকে ট্র্যাক করবে তা নির্বিশেষে আমরা একটি DOM উপাদানে setPointerCapture কল করার পরে স্পর্শটি কোথায় ঘটবে।

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

এটি বাস্তবায়নের জন্য গৃহীত পদক্ষেপগুলি হল:

1. সমস্ত TouchEvent এবং PointerEvent শ্রোতাদের যোগ করুন। মাউস ইভেন্টের জন্য শুধুমাত্র শুরু ইভেন্ট যোগ করুন।
2. শুরুর অঙ্গভঙ্গি কলব্যাকের ভিতরে, মাউস সরানো এবং শেষ ইভেন্টগুলি নথিতে আবদ্ধ করুন। এইভাবে সমস্ত মাউস ইভেন্ট গৃহীত হয় নির্বিশেষে ঘটনাটি আসল উপাদানে ঘটছে বা না। পয়েন্টার ইভেন্টগুলির জন্য আমাদের আরও সমস্ত ইভেন্টগুলি পেতে আমাদের মূল উপাদানটিতে setPointerCapture() কল করতে হবে। তারপর অঙ্গভঙ্গি শুরু হ্যান্ডেল.
3. সরানো ইভেন্টগুলি পরিচালনা করুন।
4. শেষ ইভেন্টে, নথি থেকে মাউস সরান এবং শেষ শ্রোতাদের সরান এবং অঙ্গভঙ্গি শেষ করুন।

নীচে আমাদের handleGestureStart() পদ্ধতির একটি স্নিপেট যা নথিতে সরানো এবং শেষ ইভেন্ট যোগ করে:

// Handle the start of gestures
this.handleGestureStart = function(evt) {
  evt.preventDefault();

  if(evt.touches && evt.touches.length > 1) {
    return;
  }

  // Add the move and end listeners
  if (window.PointerEvent) {
    evt.target.setPointerCapture(evt.pointerId);
  } else {
    // Add Mouse Listeners
    document.addEventListener('mousemove', this.handleGestureMove, true);
    document.addEventListener('mouseup', this.handleGestureEnd, true);
  }

  initialTouchPos = getGesturePointFromEvent(evt);

  swipeFrontElement.style.transition = 'initial';
}.bind(this);

চেষ্টা করে দেখুন

আমরা যে শেষ কলব্যাকটি যোগ করি তা হল handleGestureEnd() , যা নথি থেকে সরানো এবং শেষ ইভেন্ট শ্রোতাদের সরিয়ে দেয় এবং অঙ্গভঙ্গি শেষ হয়ে গেলে পয়েন্টার ক্যাপচার প্রকাশ করে:

// Handle end gestures
this.handleGestureEnd = function(evt) {
  evt.preventDefault();

  if (evt.touches && evt.touches.length > 0) {
    return;
  }

  rafPending = false;

  // Remove Event Listeners
  if (window.PointerEvent) {
    evt.target.releasePointerCapture(evt.pointerId);
  } else {
    // Remove Mouse Listeners
    document.removeEventListener('mousemove', this.handleGestureMove, true);
    document.removeEventListener('mouseup', this.handleGestureEnd, true);
  }

  updateSwipeRestPosition();

  initialTouchPos = null;
}.bind(this);

চেষ্টা করে দেখুন

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

এই চিত্রটি দেখায় যে স্পর্শ ইভেন্টগুলি কী করছে যখন আমরা একটি অঙ্গভঙ্গি শুরু হওয়ার পরে নথিতে সরানো এবং শেষ ইভেন্টগুলি যোগ করি৷

দক্ষতার সাথে স্পর্শ সাড়া

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

যেকোনও শুরু এবং সরানো ইভেন্টের জন্য, আপনি সহজেই একটি ইভেন্ট থেকে x এবং y বের করতে পারেন।

নিচের উদাহরণটি TouchEvent থেকে ইভেন্টটি কিনা তা পরীক্ষা করে দেখেছে যে targetTouches আছে কিনা। যদি এটি করে, তাহলে এটি প্রথম স্পর্শ থেকে clientX এবং clientY বের করে। যদি ইভেন্টটি একটি PointerEvent বা MouseEvent হয় তবে এটি সরাসরি ইভেন্ট থেকে clientX এবং clientY বের করে।

function getGesturePointFromEvent(evt) {
    var point = {};

    if (evt.targetTouches) {
      // Prefer Touch Events
      point.x = evt.targetTouches[0].clientX;
      point.y = evt.targetTouches[0].clientY;
    } else {
      // Either Mouse event or Pointer Event
      point.x = evt.clientX;
      point.y = evt.clientY;
    }

    return point;
  }

চেষ্টা করে দেখুন

একটি TouchEvent টাচ ডেটা সহ তিনটি তালিকা রয়েছে:

• touches : স্ক্রীনে সমস্ত বর্তমান স্পর্শের তালিকা, DOM উপাদান নির্বিশেষে তারা চালু আছে৷
• targetTouches : DOM এলিমেন্টে থাকা টাচের তালিকা যা ইভেন্টটি আবদ্ধ।
• changedTouches : স্পর্শের তালিকা যা পরিবর্তিত হয়েছে যার ফলে ইভেন্টটি বরখাস্ত হয়েছে।

বেশিরভাগ ক্ষেত্রে, targetTouches আপনাকে আপনার যা প্রয়োজন এবং যা চান তা দেয়। (এই তালিকাগুলি সম্পর্কে আরও তথ্যের জন্য টাচ তালিকা দেখুন)।

অনুরোধ অ্যানিমেশন ফ্রেম ব্যবহার করুন

যেহেতু ইভেন্ট কলব্যাকগুলি মূল থ্রেডে ফায়ার করা হয়, তাই আমরা আমাদের ইভেন্টগুলির জন্য কলব্যাকগুলিতে যতটা সম্ভব কম কোড চালাতে চাই, আমাদের ফ্রেম রেট উচ্চ রেখে এবং জ্যাঙ্ক প্রতিরোধ করতে চাই৷

requestAnimationFrame() ব্যবহার করে ব্রাউজার একটি ফ্রেম আঁকতে ইচ্ছুক হওয়ার ঠিক আগে আমাদের UI আপডেট করার সুযোগ আছে এবং আমাদের ইভেন্ট কলব্যাক থেকে কিছু কাজ সরিয়ে নিতে সাহায্য করবে।

আপনি যদি requestAnimationFrame() এর সাথে অপরিচিত হন তবে আপনি এখানে আরও জানতে পারেন।

একটি সাধারণ বাস্তবায়ন হল শুরু থেকে x এবং y স্থানাঙ্ক সংরক্ষণ করা এবং ইভেন্টগুলি সরানো এবং মুভ ইভেন্ট কলব্যাকের ভিতরে একটি অ্যানিমেশন ফ্রেমের অনুরোধ করা।

আমাদের ডেমোতে, আমরা handleGestureStart() এ প্রাথমিক স্পর্শ অবস্থান সংরক্ষণ করি ( initialTouchPos সন্ধান করুন):

// Handle the start of gestures
this.handleGestureStart = function(evt) {
  evt.preventDefault();

  if (evt.touches && evt.touches.length > 1) {
    return;
  }

  // Add the move and end listeners
  if (window.PointerEvent) {
    evt.target.setPointerCapture(evt.pointerId);
  } else {
    // Add Mouse Listeners
    document.addEventListener('mousemove', this.handleGestureMove, true);
    document.addEventListener('mouseup', this.handleGestureEnd, true);
  }

  initialTouchPos = getGesturePointFromEvent(evt);

  swipeFrontElement.style.transition = 'initial';
}.bind(this);

handleGestureMove() পদ্ধতিটি একটি অ্যানিমেশন ফ্রেমের অনুরোধ করার আগে তার ইভেন্টের অবস্থান সংরক্ষণ করে, যদি আমাদের প্রয়োজন হয়, কলব্যাক হিসাবে আমাদের onAnimFrame() ফাংশনটি পাস করে:

this.handleGestureMove = function (evt) {
  evt.preventDefault();

  if (!initialTouchPos) {
    return;
  }

  lastTouchPos = getGesturePointFromEvent(evt);

  if (rafPending) {
    return;
  }

  rafPending = true;

  window.requestAnimFrame(onAnimFrame);
}.bind(this);

onAnimFrame মান হল একটি ফাংশন যাকে কল করা হলে, এটিকে ঘুরিয়ে দেওয়ার জন্য আমাদের UI পরিবর্তন করে। এই ফাংশনটি requestAnimationFrame() এ পাস করার মাধ্যমে, আমরা ব্রাউজারকে পৃষ্ঠাটি আপডেট করার ঠিক আগে এটিকে কল করতে বলি (অর্থাৎ পৃষ্ঠায় কোনো পরিবর্তন আনুন)।

handleGestureMove() কলব্যাকে আমরা প্রাথমিকভাবে পরীক্ষা করি যে rafPending মিথ্যা কিনা, যা ইঙ্গিত করে যে শেষ মুভ ইভেন্ট থেকে onAnimFrame() কে requestAnimationFrame() কল করেছে কিনা। এর মানে আমাদের কাছে শুধুমাত্র একটি requestAnimationFrame() যে কোনো এক সময়ে চালানোর জন্য অপেক্ষা করছে।

যখন আমাদের onAnimFrame() কলব্যাক নির্বাহ করা হয়, তখন আমরা rafPending false তে আপডেট করার আগে আমরা সরাতে চাই এমন যেকোন উপাদানে রূপান্তর সেট করি, পরবর্তী টাচ ইভেন্টটিকে একটি নতুন অ্যানিমেশন ফ্রেমের অনুরোধ করার অনুমতি দেয়।

function onAnimFrame() {
  if (!rafPending) {
    return;
  }

  var differenceInX = initialTouchPos.x - lastTouchPos.x;
  var newXTransform = (currentXPosition - differenceInX)+'px';
  var transformStyle = 'translateX('+newXTransform+')';

  swipeFrontElement.style.webkitTransform = transformStyle;
  swipeFrontElement.style.MozTransform = transformStyle;
  swipeFrontElement.style.msTransform = transformStyle;
  swipeFrontElement.style.transform = transformStyle;

  rafPending = false;
}

স্পর্শ ক্রিয়া ব্যবহার করে অঙ্গভঙ্গি নিয়ন্ত্রণ করুন

CSS প্রপার্টি touch-action আপনাকে একটি উপাদানের ডিফল্ট স্পর্শ আচরণ নিয়ন্ত্রণ করতে দেয়। আমাদের উদাহরণগুলিতে, আমরা touch-action: none , আমাদের সমস্ত স্পর্শ ইভেন্টগুলিকে বাধা দেওয়ার অনুমতি দেয়৷

/* Pass all touches to javascript: */
button.custom-touch-logic {
  touch-action: none;
}

touch-action: none কিছুটা পারমাণবিক বিকল্প নয় কারণ এটি সমস্ত ডিফল্ট ব্রাউজার আচরণকে বাধা দেয়। অনেক ক্ষেত্রে নীচের বিকল্পগুলির মধ্যে একটি একটি ভাল সমাধান।

touch-action আপনাকে ব্রাউজার দ্বারা বাস্তবায়িত অঙ্গভঙ্গি নিষ্ক্রিয় করতে দেয়। উদাহরণস্বরূপ, IE10+ জুম অঙ্গভঙ্গি করতে একটি ডবল-ট্যাপ সমর্থন করে৷ manipulation একটি touch-action সেট করে আপনি ডিফল্ট ডাবল-ট্যাপ আচরণ প্রতিরোধ করেন।

এটি আপনাকে নিজেই একটি ডবল-ট্যাপ অঙ্গভঙ্গি বাস্তবায়ন করতে দেয়৷

নীচে সাধারণত ব্যবহৃত touch-action মানগুলির একটি তালিকা রয়েছে:

IE এর পুরানো সংস্করণ সমর্থন করে

আপনি যদি IE10 সমর্থন করতে চান, তাহলে আপনাকে PointerEvents এর বিক্রেতা প্রিফিক্সড সংস্করণগুলি পরিচালনা করতে হবে।

PointerEvents এর সমর্থন পরীক্ষা করার জন্য আপনি সাধারণত window.PointerEvent খুঁজবেন, কিন্তু IE10-এ, আপনি window.navigator.msPointerEnabled খুঁজবেন।

ভেন্ডর প্রিফিক্স সহ ইভেন্টের নামগুলি হল: 'MSPointerDown' , 'MSPointerUp' এবং 'MSPointerMove' ।

নীচের উদাহরণটি আপনাকে দেখায় যে কীভাবে সহায়তার জন্য পরীক্ষা করবেন এবং ইভেন্টের নামগুলি পরিবর্তন করবেন৷

var pointerDownName = 'pointerdown';
var pointerUpName = 'pointerup';
var pointerMoveName = 'pointermove';

if (window.navigator.msPointerEnabled) {
  pointerDownName = 'MSPointerDown';
  pointerUpName = 'MSPointerUp';
  pointerMoveName = 'MSPointerMove';
}

// Simple way to check if some form of pointerevents is enabled or not
window.PointerEventsSupport = false;
if (window.PointerEvent || window.navigator.msPointerEnabled) {
  window.PointerEventsSupport = true;
}

আরও তথ্যের জন্য, Microsoft থেকে এই আপডেট নিবন্ধটি চেকআউট করুন।

রেফারেন্স

স্পর্শ রাজ্যের জন্য ছদ্ম ক্লাস

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

নির্দিষ্ট টাচ ইভেন্টের রেফারেন্স এখানে পাওয়া যাবে: W3C টাচ ইভেন্ট ।

স্পর্শ, মাউস, এবং পয়েন্টার ইভেন্ট

এই ইভেন্টগুলি আপনার অ্যাপ্লিকেশনে নতুন অঙ্গভঙ্গি যোগ করার জন্য বিল্ডিং ব্লক:

স্পর্শ তালিকা

প্রতিটি স্পর্শ ইভেন্ট তিনটি তালিকা বৈশিষ্ট্য অন্তর্ভুক্ত:

iOS এ সক্রিয় রাষ্ট্র সমর্থন সক্ষম করা হচ্ছে

দুর্ভাগ্যবশত, iOS-এ Safari ডিফল্টরূপে সক্রিয় অবস্থা প্রয়োগ করে না, এটিকে কাজ করার জন্য আপনাকে ডকুমেন্ট বডিতে বা প্রতিটি উপাদানে একটি touchstart ইভেন্ট লিসেনার যোগ করতে হবে।

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

বডিতে একটি টাচ স্টার্ট যোগ করলে DOM-এর সমস্ত উপাদানে প্রয়োগ করার সুবিধা রয়েছে, তবে পৃষ্ঠাটি স্ক্রোল করার সময় এতে কর্মক্ষমতার সমস্যা হতে পারে।

window.onload = function() {
  if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
    document.body.addEventListener('touchstart', function() {}, false);
  }
};

বিকল্পটি হ'ল পৃষ্ঠার সমস্ত ইন্টারঅ্যাক্টেবল উপাদানগুলিতে টাচ স্টার্ট শ্রোতাদের যোগ করা, কিছু পারফরম্যান্স উদ্বেগ দূর করে।

window.onload = function() {
  if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
    var elements = document.querySelectorAll('button');
    var emptyFunction = function() {};

    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('touchstart', emptyFunction, false);
    }
  }
};