ব্রাউজারের কোনও মাউস নেই এবং কেবল স্পর্শযোগ্য তা সনাক্ত করা হচ্ছে

149

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

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

পার্শ্ব নোট হিসাবে, আমার টাচ ইন্টারফেসটি কেবল কীবোর্ড-কেবল ডিভাইসের জন্যই উপযুক্ত হতে পারে, তাই এটির জন্য মাউসের অভাবটি আমি বেশি খুঁজে বের করতে চাইছি।

প্রয়োজনীয়তা আরও পরিষ্কার করার জন্য, আমি প্রয়োগ করতে চাইছি এমন API এখানে রয়েছে:

// Level 1


// The current answers provide a way to do that.
hasTouch();

// Returns true if a mouse is expected.
// Note: as explained by the OP, this is not !hasTouch()
// I don't think we have this in the answers already, that why I offer a bounty
hasMouse();

// Level 2 (I don't think it's possible, but maybe I'm wrong, so why not asking)

// callback is called when the result of "hasTouch()" changes.
listenHasTouchChanges(callback);

// callback is called when the result of "hasMouse()" changes.
listenHasMouseChanges(callback);
javascript  html  touch  mouse 
— nraynaud
সূত্র
2
— কেভিন রেড
আমি মনে করি আপনি যদি একটি অ্যাপ্লিকেশন ডেস্কটপ এবং মোবাইল / স্পর্শ উভয় ক্ষেত্রেই প্রয়োগ করতে চান তবে প্রতিটিটির জন্য আলাদা আচরণ থাকতে পারে তবে আপনার নিজের নকশাটি পুনর্বিবেচনা করা দরকার I আমি মনে করি না আপনি যা করছেন তার পরে এই মুহুর্তটি সম্ভব, যেহেতু "জাভাস্ক্রিপ্ট সনাক্তকরণ মাউস" এর জন্য গুগলে একটি দ্রুত অনুসন্ধান মাউসের বিভিন্ন রাজ্য সনাক্তকরণের জন্য quirksmode.org তে একটি মাঝারি কার্যকর পোস্ট দেখায় (ক্লিক, অবস্থান, ইত্যাদি) তবে জিরো ফলাফল দেয় যে মাউসটি আসলে আছে কিনা।
— davethegr8
24
গুগল যেহেতু আমি এখানে এটি জিজ্ঞাসা করেছি যে সহায়তা করেনি কারণ এটি হতে পারে।
— nraynaud
2
আপনি কি jquery থেকে নথির মাউসেন্টার চেষ্টা করেছেন? document (দস্তাবেজ) .মাউসেন্টার (ফাংশন (ঙ)) সতর্কতা ("মাউস");});
— পরাগ গজ্জার
4
কয়েক মিনিটের মধ্যে প্রতিটি প্রত্যাখ্যান করার জন্য প্রায় এক ডজন প্রতিশ্রুতিবদ্ধ উপায়গুলি বিবেচনা করার পরে, এই প্রশ্নটি আমাকে বেশ চমত্কারভাবে kersণদাতাদেরকে চালিত করছে।
— জর্ডান গ্রে

উত্তর:

65

প্রধান সমস্যাটি হ'ল আপনার নিম্নোক্ত ডিভাইস / ব্যবহারের ক্ষেত্রে বিভিন্ন শ্রেণি রয়েছে:

  1. মাউস এবং কীবোর্ড (ডেস্কটপ)
  2. কেবল স্পর্শ করুন (ফোন / ট্যাবলেট)
  3. মাউস, কীবোর্ড এবং স্পর্শ (টাচ ল্যাপটপ)
  4. টাচ এবং কীবোর্ড (ট্যাবলেটে ব্লুটুথ কীবোর্ড)
  5. কেবল মাউস (অক্ষম ব্যবহারকারী / ব্রাউজিং পছন্দ)
  6. কেবল কীবোর্ড (অক্ষম ব্যবহারকারী / ব্রাউজিং পছন্দ)
  7. টাচ এবং মাউস (যেমন গ্যালাক্সি নোট 2 কলমের ইভেন্টগুলি হোভার করুন)

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

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

উদাহরণস্বরূপ, বলুন যে আপনি আবিষ্কার করেছেন যে কোনও ব্যবহারকারী একটি আসল মাউসমাভ নির্গত করেছে (স্পর্শ ইভেন্ট থেকে মিথ্যা নয়, দেখুন http://www.html5rocks.com/en/mobile/tou Chandmouse / )।

তারপর কি?

আপনি কি হোভার স্টাইলগুলি সক্ষম করবেন? আপনি আরও বোতাম যুক্ত?

যে কোনও উপায়ে আপনি কাচের সময় বাড়িয়ে দিচ্ছেন কারণ আপনাকে কোনও অনুষ্ঠানের আগুনের জন্য অপেক্ষা করতে হবে।

তবে তারপরে কী ঘটে যখন আপনার মহামান্য ব্যবহারকারী তার মাউসটি আনপ্লাগ করতে এবং পুরো স্পর্শে যেতে চান .. আপনি কি এখন আপনার ক্রমযুক্ত ইন্টারফেসটি স্পর্শ করার জন্য অপেক্ষা করেন, তারপরে আপনার এখন জনাকীর্ণ UI চিহ্নিত করার চেষ্টা করার পরে ঠিক তা পরিবর্তন করুন?

বুলেট আকারে, https://github.com/Modernizr/Modernizr/issues/869#issuecomment-15264101 এ স্টুোকক্সের উদ্ধৃতি

  • আমরা একটি মাউসের উপস্থিতি সনাক্ত করতে চাই
  • Ae সম্ভবত কোনও ঘটনা চালিত হওয়ার আগে সনাক্ত করতে পারে না
  • এই হিসাবে, আমরা কী সনাক্ত করছি তা এই সেশনে মাউস ব্যবহার করা হয় - এটি পৃষ্ঠা লোড থেকে তাত্ক্ষণিকভাবে করা হবে না
  • আমরা সম্ভবত এটিও সনাক্ত করতে পারি না যে মাউস নেই - এটি সত্য অবধি সংজ্ঞায়িত হবে (আমি মনে করি এটি প্রমাণিত হওয়া পর্যন্ত এটি মিথ্যা সেট করার চেয়ে আরও বেশি অর্থবোধ করে)
  • এবং আমরা সম্ভবত সনাক্ত করতে পারি না যে কোনও মাউস মিড-সেশনের সাথে সংযোগ বিচ্ছিন্ন হয়েছে - এটি কেবলমাত্র তাদের মাউসটি দিয়ে দেওয়া ব্যবহারকারীর কাছ থেকে পৃথক হতে পারে

একপাশে: ব্রাউজার কখনই বুঝতে পারে কোনও ব্যবহারকারী কখন মাউসে প্লাগ ইন করে / কীবোর্ডের সাথে সংযোগ স্থাপন করে তবে জাভাস্ক্রিপ্টে এটি প্রকাশ করে না .. ডাং!

এটি আপনাকে নীচের দিকে নিয়ে যেতে হবে:

প্রদত্ত ব্যবহারকারীর বর্তমান ক্ষমতা সন্ধান করা জটিল, অবিশ্বাস্য এবং সন্দেহজনক যোগ্যতার

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

— ওয়াইয়াট
সূত্র
3
দুর্দান্ত উত্তর আশা করি, ব্যবহারকারীর সর্বদা একটি স্ক্রিন থাকে! আমি মনে করি যে এটি এমন একটি ইন্টারফেস তৈরি করা বোধগম্য হয় যেখানে ব্যবহারকারীর বর্তমান ইন্টারঅ্যাকশন মোডের সাথে সামঞ্জস্য হয়। কোনও টাচ ল্যাপটপে, :hoverযখন ব্যবহারকারী মাউস থেকে স্পর্শে স্যুইচ করে তখন অ্যাপটি অ্যাডজাস্ট করা (যেমন উপাদান এবং এর মতো জিনিসগুলি) বোঝায় sense ব্যবহারকারী সম্ভবত একই সময়ে মাউস + টাচ ব্যবহার করছে বলে মনে হয় না (আমার মানে এটি একই কম্পিউটারে 2 মাউস সংযুক্ত হওয়ার মত)
— সেবাস্তিয়ান লোরবার
@ সেবাস্তিয়ানলবারবার - এটি আপনার কাছে ভেঙে ফেলার ঘৃণা তবে ব্যবহারকারীরা সর্বদা পর্দা রাখেন না । ( কোনও ব্যবহারকারী মেশিনে কোনও স্ক্রিন রিডার চলছে কিনা তা সনাক্ত করার জন্য কী জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভব? )
— ashleedawg
57

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

var mouseDetected = false;
function onMouseMove(e) {
  unlisten('mousemove', onMouseMove, false);
  mouseDetected = true;
  // initializeMouseBehavior();
}
listen('mousemove', onMouseMove, false);

(যেখানে listenএবং যথাযথ বা যথাযথভাবে unlistenডেলিগেট দিন ))addEventListenerattachEvent

আশা করি এটি খুব বেশি ভিজ্যুয়াল জ্যাঙ্কের দিকে না চলে, মোডের উপর ভিত্তি করে আপনার যদি পুনঃনির্মাণের প্রয়োজন হয় তবে এটি স্তন্যপান করবে ...

— দেনিযেল
সূত্র
2
এটি একটি ভাল ধারণা, তবে দুর্ভাগ্যক্রমে প্রতিক্রিয়া বিলম্ব হ'ল এটি যখন অকার্যকর হয়ে উঠবে যখন অ্যাপ্লিকেশনটির ইউআই মাউস উপলব্ধ কিনা তার উপর নির্ভর করে .. অ্যাপ্লিকেশনটি যদি আইফ্রেড করা হতে পারে তবে এটি বিশেষত সত্য, সুতরাং মাউস ইভেন্টগুলি কেবল তখনই এটি আঘাত করবে যদি মাউস
— ইফ্রেমে
7
অ্যাপ্লিকেশনটি একটি স্প্ল্যাশ স্ক্রিন এবং "চালিয়ে" বোতাম দিয়ে শুরু করা হলে এটি কাজ করতে পারে। প্রথম মাউসডাউন ইভেন্টের আগে যদি মাউসটি সরানো থাকে তবে আপনার একটি মাউস থাকবে। এটি কেবলমাত্র ব্যর্থ হবে যদি বোতামটি সরাসরি মাউসের নীচে লোড হয় এবং ব্যবহারকারীর খুব অবিচল হাত থাকে (এমনকি 1 পিক্সেল মুভিংটি নেওয়া উচিত)।
— SpliFF
49
দুর্দান্ত ধারণা, তবে আমাদের পরীক্ষায় কাজ করার জন্য উপস্থিত হয় না । আইপ্যাডগুলি এই ইভেন্টটিকে ট্রিগার করে।
— জেফ আতউড
3
@ জেফএটউড আপনার নিজের ক্ষেত্রে কী করছেন?
— মাইকেল হরেন
2
আইপ্যাডগুলি অবশ্যই মাউসডাউন ইভেন্টের ঠিক আগেই মাউস সরানো ইভেন্টটি ট্রিগার করে। মাউসডাউন গণনা> 0 এবং মাউসডাউন গণনা == মাউসমাভ গণনাটি কোনও মাউস সনাক্ত করার জন্য ভাল উপায় হিসাবে আমি খুঁজে পেয়েছি। আমি এটিকে সত্যিকারের মাউসের সাহায্যে নকল করতে পারি না।
— পিটার ওয়েস্টার
36

2018 পর্যন্ত ব্রাউজারের মাউস (বা অনুরূপ ইনপুট ডিভাইস) রয়েছে কিনা তা সনাক্ত করার একটি ভাল এবং নির্ভরযোগ্য উপায় রয়েছে: CSS4 মিডিয়া ইন্টারঅ্যাকশন বৈশিষ্ট্য যা এখন প্রায় কোনও আধুনিক ব্রাউজার (আইই 11 এবং বিশেষ মোবাইল ব্রাউজার বাদে) দ্বারা সমর্থিত।

W3C এর:

পয়েন্টার মিডিয়া বৈশিষ্ট্যটি মাউসের মতো পয়েন্টিং ডিভাইসের উপস্থিতি এবং যথার্থতা সম্পর্কে জিজ্ঞাসা করতে ব্যবহৃত হয়।

নিম্নলিখিত বিকল্পগুলি দেখুন:

    /* The primary input mechanism of the device includes a 
pointing device of limited accuracy. */
    @media (pointer: coarse) { ... }

    /* The primary input mechanism of the device 
includes an accurate pointing device. */
    @media (pointer: fine) { ... }

    /* The primary input mechanism of the 
device does not include a pointing device. */
    @media (pointer: none) { ... }

    /* Primary input mechanism system can 
       hover over elements with ease */
    @media (hover: hover) { ... }

    /* Primary input mechanism cannot hover 
       at all or cannot conveniently hover 
       (e.g., many mobile devices emulate hovering
       when the user performs an inconvenient long tap), 
       or there is no primary pointing input mechanism */
    @media (hover: none) { ... }

    /* One or more available input mechanism(s) 
       can hover over elements with ease */
    @media (any-hover: hover) { ... }


    /* One or more available input mechanism(s) cannot 
       hover (or there are no pointing input mechanisms) */
    @media (any-hover: none) { ... }

মিডিয়া প্রশ্নগুলি জেএসেও ব্যবহার করা যেতে পারে:

if(window.matchMedia("(any-hover: none)").matches) {
    // do sth
}

সম্পর্কিত:

ডাব্লু 3 ডকুমেন্টেশন: https://www.w3.org/TR/mediaqueries-4/#mf-interation

ব্রাউজার সমর্থন: https://caniuse.com/#search=media%20 ফিচারস

অনুরূপ সমস্যা: কোনও ক্লায়েন্ট ডিভাইস সমর্থন করে কিনা তা সনাক্ত করুন: হোভার এবং: ফোকাসের স্থিতি

— Blackbam
সূত্র
আমি ব্যক্তিগতভাবে এই উত্তরটি পছন্দ করি তবে এখন পর্যন্ত (10/19), @ মিডিয়া হোভার এবং পয়েন্টার সিএসএস কোয়েরিগুলি caniuse.com অনুযায়ী বিশ্বব্যাপী ~ 85% ডিভাইসে উপলব্ধ। অবশ্যই খারাপ নয়, 95% বা তার চেয়ে বেশি ভাল। আশা করি খুব শীঘ্রই এটি ডিভাইসে মানক হয়ে উঠবে।
— এমকিউইগজির্জিয়ার
1
@ এমকিউজিগर्जিয়া মূলত আমি আপনার সমালোচনার সাথে মূলত একমত, এটি এখনও সর্বত্র সমর্থিত নয়। আমার জন্য এখনও caniuse.com বলছে এটি 91.2% ( caniuse.com/#feat=css-media-interation ) সমর্থিত । কাছাকাছি নজর রাখলে এটি আইই 11 এবং মোবাইলে বিশেষ সমতল ব্রাউজার বাদে সর্বত্র সমর্থিত। ন্যায়সঙ্গত হওয়ার জন্য এটি যে কোনও আধুনিক বৈশিষ্ট্যের ক্ষেত্রে সত্য, মাইক্রোসফ্ট আইই বৈশিষ্ট্যগুলি কার্যকর করা অনেক আগে বন্ধ করে দিয়েছে। আইই 11 এর জন্য আপনি অন্য উত্তরগুলি থেকে এখানে একটি ফ্যালব্যাক ব্যবহার করতে পারেন।
— ব্ল্যাকবাম
23

@ ওয়াট এর উত্তর দুর্দান্ত এবং আমাদের অনেক কিছু চিন্তাভাবনা করার সুযোগ দেয়।

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

ইভেন্টগুলি প্রক্রিয়াভুক্ত দেওয়া অর্ডারটি বিবেচনা করে :

  1. touchstart
  2. টাচমুভ
  3. touchend
  4. মাউসওভার
  5. mousemove
  6. mousedown
  7. mouseup
  8. ক্লিক

আমরা ধরে নিতে পারি যে স্পর্শের আগে যদি মাউস ইভেন্টটি ট্রিগার হয়ে যায় তবে এটি একটি আসল মাউস ইভেন্ট, কোনও অনুকরণযুক্ত নয়। উদাহরণ (jQuery ব্যবহার করে):

$(document).ready(function() {
    var $body = $('body');
    var detectMouse = function(e){
        if (e.type === 'mousedown') {
            alert('Mouse interaction!');
        }
        else if (e.type === 'touchstart') {
            alert('Touch interaction!');
        }
        // remove event bindings, so it only runs once
        $body.off('mousedown touchstart', detectMouse);
    }
    // attach both events to body
    $body.on('mousedown touchstart', detectMouse);
});

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

— হুগো সিলভা
সূত্র
আমার জন্য কাজ করে না, আইপ্যাড সাফারি (আইওএস 8.3) এই স্নিপেটের সাহায্যে একটি মাউস সনাক্ত করে
— নেটজাফফিন
3
@netzaffin। প্রতিক্রিয়ার জন্য ধন্যবাদ, আমি এটি মাউসওভারের পরিবর্তে মাউসডাউন ব্যবহার করে আরও সুসংগত বলে মনে করেছি। আপনি কি আপনার আইওএসের এই ঝাঁকুনির দিকে নজর রাখবেন এবং আমাকে ফলাফলটি জানান? চিয়ার্স jsfiddle.net/bkwb0qen/15/ebded/result
— হুগো সিলভা
1
আপনার যদি মাউস সহ টাচস্ক্রিন থাকে তবে প্রথমে ব্যবহৃত ইনপুট পদ্ধতিটি সনাক্ত করা হবে।
— 0xcaff
11

কোনও ব্রাউজার স্পর্শ সক্ষম কিনা তা সনাক্ত করা সম্ভব । এটির কোনও টাচ স্ক্রিন বা মাউস সংযুক্ত আছে কিনা তা জানার কোনও উপায় নেই।

স্পর্শ সক্ষমতা সনাক্ত করা গেলে মাউস ইভেন্টের পরিবর্তে স্পর্শ ইভেন্ট শোনার মাধ্যমে কেউ ব্যবহারকে অগ্রাধিকার দিতে পারেন।

স্পর্শ ক্ষমতা ক্রস ব্রাউজার সনাক্ত করতে:

function hasTouch() {
    return (('ontouchstart' in window) ||       // html5 browsers
            (navigator.maxTouchPoints > 0) ||   // future IE
            (navigator.msMaxTouchPoints > 0));  // current IE10
}

তারপরে কেউ এটি ব্যবহার করতে পারেন:

if (!hasTouch()) alert('Sorry, need touch!);

বা কোন ইভেন্টটি শুনতে হবে তা বেছে নিতে:

var eventName = hasTouch() ? 'touchend' : 'click';
someElement.addEventListener(eventName , handlerFunction, false);

বা স্পর্শ বনাম স্পর্শের জন্য পৃথক পদ্ধতি ব্যবহার করুন:

if (hasTouch() === true) {
    someElement.addEventListener('touchend' , touchHandler, false);

} else {
    someElement.addEventListener('click' , mouseHandler, false);

}
function touchHandler(e) {
    /// stop event somehow
    e.stopPropagation();
    e.preventDefault();
    window.event.cancelBubble = true;
    // ...
    return false; // :-)
}
function mouseHandler(e) {
    // sorry, touch only - or - do something useful and non-restrictive for user
}

মাউসের জন্য কেউ কেবল তখনই মাউসটি ব্যবহার করা হচ্ছে কিনা তা সনাক্ত করতে পারে, এটি বিদ্যমান আছে বা নেই not ব্যবহারের মাধ্যমে মাউস সনাক্ত করা হয়েছিল (এটি একটি বিদ্যমান উত্তরের সমান, তবে কিছুটা সরলীকৃত) ইঙ্গিত দিতে যে কেউ বৈশ্বিক পতাকা সেটআপ করতে পারেন:

var hasMouse = false;

window.onmousemove = function() {
    hasMouse = true;
}

( এই ইভেন্টটি স্পর্শের মাধ্যমে ট্রিগারও করা যেতে পারে mouseupবা mousedownএটি অন্তর্ভুক্ত করতে পারে না )

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

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

সুতরাং উপসংহারে: এই জাতীয় সনাক্তকরণ কেবলমাত্র "ভাল অনুমান" দ্বারা অনুমান করা যায়।

8

মিডিয়া কোয়েরি স্তর 4 যখন ব্রাউজারগুলিতে পাওয়া যায়, আমরা মাউস সহ ডিভাইসগুলি সনাক্ত করতে "পয়েন্টার" এবং "হোভার" অনুসন্ধানগুলি ব্যবহার করতে সক্ষম হব।

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

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

— joeytwiddle
সূত্র
1
বিশেষত, any-pointerএবংany-hover আপনাকে প্রয়োগযোগ্য সমস্ত ডিভাইস ক্ষমতা তদন্ত করতে দেয়। ভবিষ্যতে কীভাবে আমরা এই সমস্যাটি সমাধান করতে পারি তা উঁকি দিয়ে খুব ভাল লাগছে! :)
— জর্ডান গ্রে
2
উইন্ডো.ম্যাচমিডিয়া ("(যে কোনও পয়েন্টার: মোটা)")। ম্যাচগুলি === সত্য?
— 4esn0k
7

যেহেতু আপনি যে কোনও উপায়ে ইন্টারফেসগুলির মধ্যে স্যুইচ করার কোনও উপায় দেওয়ার পরিকল্পনা করছেন, তাই ব্যবহারকারীকে কোনও লিঙ্ক বা বোতামটি ক্লিক করে অ্যাপ্লিকেশনটির সঠিক সংস্করণটি "প্রবেশ" করতে বলা কি সম্ভব হবে? তারপরে আপনি ভবিষ্যতের দর্শনগুলির জন্য তাদের পছন্দটি মনে করতে পারেন। এটি উচ্চ প্রযুক্তি নয়, তবে এটি 100% নির্ভরযোগ্য :-)

— brandan
সূত্র
2
এটি আসলে বেশ ভাল পরামর্শ, তবে ব্যবহারকারী আসল ইন্টারফেসে যাওয়ার আগে সময়টি বিলম্ব করে। এছাড়াও, আমাকে প্রাথমিক পছন্দ পরে স্যুইচিংয়ের একটি উপায় প্রদান করতে হবে। এটি সহজেই সনাক্ত করা যায় তার চেয়ে বেশি কাজ করা শেষ করে ..
— জন জেনজেট
1
ব্যবহারকারীকে জিজ্ঞাসা করা স্পষ্টভাবে সর্বোত্তম উপায় - যদি সর্বদা বোকা না হয় - এবং আপনাকে আপগ্রেড-বিজ্ঞপ্তিগুলি রাখার জন্য একটি সুবিধাজনক জায়গা দেয় এবং কী নয়। আমার মনে হয় আপনি "সমস্যা" ভাবছেন না ..
— T4NK3R
4

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

সুতরাং, যা বলা হচ্ছে তার সাথে, আমাদের কেবল আমাদের বিদ্যমান বিকল্প ... ইভেন্টগুলি দিয়ে চেষ্টা করতে হবে এবং সর্বোত্তম চেষ্টা করতে হবে। আমি জানি আপনি ঠিক এটি যা খুঁজছেন তা নয় ... সম্মত হয়েছি এটি বর্তমানে আদর্শ থেকে অনেক দূরে is

কোনও ব্যবহারকারী যে কোনও মুহুর্তে মাউস ব্যবহার করছে বা স্পর্শ করছে তা নির্ধারণের জন্য আমরা আমাদের যথাসাধ্য চেষ্টা করতে পারি। এখানে jQuery এবং নকআউট ব্যবহার করে একটি দ্রুত এবং নোংরা উদাহরণ রয়েছে:

//namespace
window.ns = {};

// for starters, we'll briefly assume if touch exists, they are using it - default behavior
ns.usingTouch = ko.observable(Modernizr.touch); //using Modernizr here for brevity.  Substitute any touch detection method you desire

// now, let's sort out the mouse
ns.usingMouse = ko.computed(function () {
    //touch
    if (ns.usingTouch()) {
        //first, kill the base mousemove event
        //I really wish browsers would stop trying to handle this within touch events in the first place
        window.document.body.addEventListener('mousemove', function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }, true);

        //remove mouse class from body
        $('body').removeClass("mouse");

        //switch off touch listener
        $(document).off(".ns-touch");

        // switch on a mouse listener
        $(document).on('mousemove.ns-mouse', function (e) {
            if (Math.abs(window.lastX - e.clientX) > 0 || window.lastY !== e.clientY) {
                ns.usingTouch(false);  //this will trigger re-evaluation of ns.usingMouse() and result in ns.usingMouse() === true
            }
        });

        return false;
    }
    //mouse
    else {
        //add mouse class to body for styling
        $('body').addClass("mouse");

        //switch off mouse listener
        $(document).off(".ns-mouse");

        //switch on a touch listener
        $(document).on('touchstart.ns-touch', function () { ns.usingTouch(true) });

        return true;
    }
});

//tests:
//ns.usingMouse()
//$('body').hasClass('mouse');

আপনি এখন মাউস () ব্যবহার করে এবং টাচ () এবং / অথবা আপনার ইন্টারফেসটি বডি.মাউস ক্লাসের সাথে আবদ্ধ / সাবস্ক্রাইব করতে পারবেন । মাউস কার্সার সনাক্ত হওয়ার সাথে সাথে টাচস্টার্টটিতে ইন্টারফেসটি পিছনে পিছনে স্যুইচ করবে।

আশা করি শীঘ্রই আমাদের কাছে ব্রাউজার বিক্রেতাদের কাছ থেকে আরও কিছু ভাল বিকল্প থাকবে।

— রেভিডেস সাহস
সূত্র
2

তেরা-ডাব্লুএফআরএফএল এটির ডেটাবেসটির সাথে ব্রাউজারের স্বাক্ষরের তুলনা করে আপনার সাইটে যে ডিভাইসটি পরিদর্শন করছে তার সক্ষমতা বলতে পারে । এটি একবার দেখুন, এটি বিনামূল্যে!

— গিগি
সূত্র
1
এটি এমন ডিভাইসগুলির জন্য কাজ করবে না যার মধ্যে টাচ স্ক্রিন এবং মাউস থাকতে পারে may উদাহরণস্বরূপ, একটি ডেস্কটপ উইন্ডোজ কম্পিউটারটি কোনও টাচ স্ক্রিনের সাথে সংযুক্ত থাকতে পারে তবে সাধারণত একটি
— মাউসও
@ জোহনু কেবল ধরে নিন যে ডেস্কটপ অপারেটিং সিস্টেমে একটি মাউস সংযুক্ত রয়েছে। সর্বোপরি, তাদের অবশ্যই একটি বিস্তৃত সফ্টওয়্যার সমর্থন করতে হবে যা একটি টাচস্ক্রিন মাথায় রেখে তৈরি করা হয়নি।
— গিগি
1
প্লেন উইন্ডোজ 8 চলমান ট্যাবলেটগুলি সম্পর্কে কী? নাকি লিনাক্স? নাকি অ্যান্ড্রয়েড চলছে ল্যাপটপগুলো?
— জন জেনজেট
2
@ জোহনহো স্পষ্টতই এই পদ্ধতিরটি অনুকূলের চেয়ে কম, তবে এটি জানার কোনও বহনযোগ্য উপায় নেই (এখনও)। যদি কেউ অ্যান্ড্রয়েডের সাথে একটি ল্যাপটপ চালাচ্ছে তবে কেবল ধরে নিন এটি স্পর্শ-সক্ষম। যদি কেউ একটি উইন্ডোজ 8 ট্যাবলেট চালাচ্ছেন তবে কেবল ধরে নিন এটি মাউস-সক্ষম (ওএসের অবশ্যই মাউসকে অ-টাচ প্রোগ্রামগুলির জন্য অনুকরণ করতে হবে)।
— গিগি
এটি এখন এত পুরানো যে এটি আর প্রাসঙ্গিক নয়।
— ইঞ্জিনিয়ার
2

এটিতে ছোঁয়া বোঝার এবং / অথবা মাউসের গতিবিধিতে প্রতিক্রিয়া জানার ক্ষমতা আছে কিনা আপনি কেন এটি সনাক্ত করতে পারবেন না?

// This will also return false on
// touch-enabled browsers like Chrome
function has_touch() {
  return !!('ontouchstart' in window);
}

function has_mouse() {
  return !!('onmousemove' in window);
}
— iblue
সূত্র
4
কারণ কিছু ব্রাউজার (উদাহরণস্বরূপ IE9) জানায় যে ফাংশনটি কখনই ট্রিগার করা না থাকলেও তা বিদ্যমান। আমি বিশ্বাস করি এটিও "সঠিক" আচরণ।
— জন জেনজেট
আপনি কেন একটি ফাংশন ব্যবহার করবেন? শুধু has_touch = 'ontouchstart' in windowযথেষ্ট হবে, ইত্যাদি।
— vsync
ওয়েল, এটি কমপক্ষে ওএস এক্সের জন্য ক্রোম 47 এ কাজ করে। অনটচ স্টার্ট প্রতিবেদন করা হচ্ছে না।
— ফ্রেইকহেড 3'16
2

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

var mousedown = false;
var mousemovecount = 0;
function onMouseDown(e){
    mousemovecount = 0;
    mousedown = true;
}
function onMouseUp(e){
    mousedown = false;
    mousemovecount = 0;
}
function onMouseMove(e) {
    if(!mousedown) {
        mousemovecount++;
        if(mousemovecount > 5){
            window.removeEventListener('mousemove', onMouseMove, false);
            console.log("mouse moved");
            $('body').addClass('has-mouse');
        }
    } else {
        mousemovecount = 0;
    }
}
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
— মাইকেল কন্ডুরিস
সূত্র
0

Modenizr এ দেখুন এর বৈশিষ্ট্যগুলির মধ্যে একটি হ'ল স্পর্শ

http://modernizr.com/docs/#features-misc

যদিও আমি পুরোপুরি পরীক্ষা করে নিইনি বলে মনে হচ্ছে এটি খুব ভাল কাজ করে

এছাড়াও এটি আধুনিকীকরণ পৃষ্ঠা থেকে লিঙ্ক করা হয়েছে: //

— exussum
সূত্র
এটি স্পর্শের সামর্থ্য সনাক্ত করার চেষ্টা করে, কেবলমাত্র স্পর্শ রয়েছে এবং মাউসের ক্ষমতা নেই not এই প্রশ্নটি স্পর্শ সনাক্তকরণের চেয়ে মৌলিকভাবে পৃথক।
— জিম্বো জনি
0

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

স্পর্শ ইভেন্ট এবং মাউস ইভেন্ট একচেটিয়া। সুতরাং এটি বিভিন্ন পদক্ষেপ গ্রহণে কিছুটা সহায়তা করতে পারে। সমস্যাটি হ'ল স্পর্শ ইভেন্টগুলি মাউসের উপরের / নীচে / সরানো ইভেন্টগুলির আরও কাছাকাছি থাকে এবং একটি ক্লিক ইভেন্টও ট্রিগার করে।

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

যদি এটি হয় তবে আপনি সনাক্ত করতে কিছুটা অলস উপায় গ্রহণ করতে পারেন:

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

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

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

— লুক
সূত্র
0

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

function is_touch_present() {
  return ('ontouchstart' in window) || ('onmsgesturechange' in window);
}

function is_mouse_present() {
  return (('onmousedown' in window) && ('onmouseup' in window) && ('onmousemove' in window) && ('onclick' in window) && ('ondblclick' in window) && ('onmousemove' in window) && ('onmouseover' in window) && ('onmouseout' in window) && ('oncontextmenu' in window));
}

alert("Touch Present: " + is_touch_present());
alert("Mouse Present: " + is_mouse_present());
— Bikas
সূত্র
2
সাফারি আয় iPad trueজন্য'onmousedown' in window
— VSync
0

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

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

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

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

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

— talkol
সূত্র
ভাল কাজের পরামর্শের জন্য ধন্যবাদ ... আমি মনে করি মূল সমস্যাটি সোভাল না হওয়ায় আমাকে এর একটি সমাধান করতে হবে
— স্যামুয়েল রসিল
দুর্ভাগ্যক্রমে একটি আইপ্যাডের উপর ক্লিক করে মাউসমেভ ট্রিগার হয়ে যায়। কেবল সিমুলেটর দিয়ে পরীক্ষা করা। হ্যাসমাউসের জন্য () আমি ব্যবহার করছিলাম যদি (! 'উইন্ডোতে' অ্যান্টিস্টার্ট ') সত্য হয়; তবে টাচ সমর্থিত ল্যাপটপের জন্য কাজ করে না।
— ক্রিস গুণাওয়ারডেনা
@ ক্রিস জি - আইপ্যাড হেল্ক ... (দেয়ালের বিরুদ্ধে মাথা
— ঠেকিয়ে
0

বিভিন্ন পিসি, লিনাক্স, আইফোন, অ্যান্ড্রয়েড ফোন এবং ট্যাবগুলিতে কিছু পরীক্ষা চালিয়ে যান। অদ্ভুত যে কোনও সহজ বুলেট-প্রমাণ সমাধান নেই। টাচ এবং মাউস নেই এমন কিছু যখন এখনও টাচ এবং মাউস ইভেন্টগুলি প্রয়োগ করে তখন সমস্যা দেখা দেয়। যেহেতু কেবলমাত্র মাউস-কেবল এবং কেবলমাত্র স্পর্শ-কেবল উদাহরণগুলি সমর্থন করতে চান, উভয়ই প্রক্রিয়া করতে চান, তবে এটি ব্যবহারকারীর ইন্টারঅ্যাকশনগুলির দ্বিগুণ ঘটনা ঘটায়। যদি জানতে পারি ডিভাইসে মাউস উপস্থিত না থাকে তবে জাল / inোকানো মাউস ইভেন্টগুলি উপেক্ষা করতে জানতে পারেন। মাউসমোভের মুখোমুখি হলে পতাকা স্থাপনের চেষ্টা করা হয়েছে, তবে কিছু ব্রাউজারগুলি নকল মাউসমুভ পাশাপাশি মাউসআপ এবং মাউসডাউন ফেলে দেয়। টাইমস্ট্যাম্পগুলি পরীক্ষা করার চেষ্টা করা হয়েছিল তবে এটি খুব ঝুঁকিপূর্ণ ছিল। নীচের লাইন: আমি ব্রাউজারগুলি খুঁজে পেয়েছি যা জাল মাউস ইভেন্টগুলি তৈরি করে alwaysোকানো মাউসডাউন এর ঠিক পূর্বে সর্বদা একটি একক মাউসমোভ .োকানো হয়েছিল। আমার ক্ষেত্রে 99.99% এ, একটি আসল মাউস থাকা এমন কোনও সিস্টেমে যখন চলতে থাকে, সেখানে একাধিক পরপর মাউসমোভ ইভেন্ট থাকে - কমপক্ষে দুটি। সুতরাং, সিস্টেমটি পর পর দুটি মাউসমোভ ইভেন্টের মুখোমুখি হয় কিনা তা ট্র্যাক করে রাখুন এবং ঘোষণা করুন যে যদি এই শর্তটি কখনও পূরণ না হয় তবে কোনও মাউস উপস্থিত নেই। এটি সম্ভবত খুব সহজ তবে এটি আমার সমস্ত পরীক্ষার সেটআপগুলিতে কাজ করছে। ভাবুন আমি এর সাথে স্থির থাকব যতক্ষণ না আমি এর থেকে আরও ভাল সমাধান পাই। - জিম ডাব্লু

— jwasch
সূত্র
0

মাউস ব্যবহার সনাক্তকরণের জন্য jQuery এর একটি সহজ সমাধান, যা মোবাইল ডিভাইসগুলি 'মাউসমোভ' ইভেন্টটি ট্রিগার করে এমন সমস্যাটি সমাধান করে। মাউসমোভ শ্রোতাদের সরানোর জন্য কেবল একটি টাচস্টার্ট শ্রোতাকে যুক্ত করুন, যাতে এটি স্পর্শে ট্রিগার না হয়।

$('body').one('touchstart.test', function(e) {
  // Remove the mousemove listener for touch devices
  $('body').off('mousemove.test');
}).one('mousemove.test', function(e) {
  // MOUSE!
});

অবশ্যই, ডিভাইসটি এখনও স্পর্শ এবং মাউস হতে পারে, তবে উপরের গ্যারান্টি দেবে যে আসল মাউস ব্যবহার হয়েছিল।

— suncat100
সূত্র
0

সবেমাত্র একটি সমাধান পেয়েছি যা আমি মনে করি এটি বেশ মার্জিত is

// flag as mouse interaction by default
var isMouse = true;

// detect a touch event start and flag it
$(window).on('touchstart', function () {
  // if triggers touchstart, toggle flag
  // since touch events come before mouse event / click
  // callback of mouse event will get in callback
  // `isMouse === false`
  isMouse = false;
});

// now the code that you want to write
// should also work with `mouse*` events
$('a.someClass').on('click', function () {
  if (isMouse) {
    // interaction with mouse event
    // ...
  } else {
    // reset for the next event detection
    // this is crucial for devices that have both
    // touch screen and mouse
    isMouse = true;

    // interaction with touch event
    // ...
  }
});
— কোয়ালা ইয়াং
সূত্র
0

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

var body = document.getElementsByTagName('body')[0];
var mouseCount = 0;

// start in an undefined state 
// (i use this to blend in elements once we decide what input is used)
var interactionMode = 'undefined';


var registerMouse = function() {
  // count up mouseCount every time, the mousemove event is triggered
  mouseCount++;

  // but dont set it instantly. 
  // instead wait 20 miliseconds (seems to be a good value for multiple move actions), 
  // if another mousemove event accoures switch to mouse as interaction 
  setTimeout(function() {
    // a touch event triggers also exactly 1 mouse move event.
    // So only if mouseCount is higher than 1 we are really moving the cursor by mouse.
    if (mouseCount > 1) {
      body.removeEventListener('mousemove', registerMouse);
      body.removeEventListener('touchend', registerTouch);

      interactionMode = 'mouse';
      console.log('now mousing');
      listenTouch();
    }

    // set the counter to zero again
    mouseCount = 0;
  }, 20);
};

var registerTouch = function() {
  body.removeEventListener('mousemove', registerMouse);
  body.removeEventListener('touchend', registerTouch);

  interactionMode = 'touch';
  console.log('now touching');
  mouseCount = 0;

  listenMouse();
};

var listenMouse = function() {
  body.addEventListener("mousemove", registerMouse);
};
var listenTouch = function() {
  body.addEventListener("touchend", registerTouch);
};

listenMouse();
listenTouch();

// after one second without input, assume, that we are touching
// could be adjusted to several seconds or deleted
// without this, the interactionMode would stay 'undefined' until first mouse or touch event
setTimeout(function() {
  if (!body.classList.contains('mousing') || body.classList.contains('touching')) {
    registerTouch();
  }
}, 1000);
/* fix, so that scrolling is possible */

html,
body {
  height: 110%;
}
Mouse or touch me
স্নিপেট প্রসারিত করুন

আমি খুঁজে পাওয়া একমাত্র সমস্যাটি হ'ল, কোনও স্পর্শ ইভেন্টটি সঠিকভাবে সনাক্ত করতে আপনাকে স্ক্রোল করতে সক্ষম হতে হবে। একটি একক ট্যাব (স্পর্শ) সমস্যা তৈরি করতে পারে।

— জ্যানিস নেক্সর আইয়ানাস বেতজ
সূত্র
0

আমি আমার ফোনগ্যাপ অ্যাপ্লিকেশনটির জন্য এই সমস্যাটি সনাক্ত করতে ঘন্টা ব্যয় করেছি এবং আমি এই হ্যাকটি নিয়ে এসেছি। ইভেন্টটি ট্রিগার হওয়া কোনও "প্যাসিভ" ইভেন্ট হলে এটি কনসোল সতর্কতা উত্পন্ন করে, যার অর্থ এটি কোনও পরিবর্তন কার্যকর করে না, তবে এটি কার্যকর হয়! আমি উন্নত করতে কোনও ধারণা বা আরও ভাল পদ্ধতিতে আগ্রহী হবে। তবে এটি কার্যকরভাবে আমার univers। টাচ () সর্বজনীনভাবে ব্যবহার করতে দেয়।

$(document).ready(function(){
  $("#aButton").touch(function(origElement, origEvent){
    console.log('Original target ID: ' + $(origEvent.target).attr('id'));
  });
});

$.fn.touch = function (callback) {
    var touch = false;
    $(this).on("click", function(e){
        if (!touch)
        {
            console.log("I click!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }else{
            touch = true;
        }
        touch = false;
    });
    $(this).on("touchstart", function(e){
        if (typeof e.touches != typeof undefined)
        {
            e.preventDefault();
            touch = true;
            console.log("I touch!");
            let callbackReal = callback.bind(this);
            callbackReal(this, e);
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="aButton">A Button</button>
স্নিপেট প্রসারিত করুন

— স্থূলবুদ্ধি বাচাল ব্যক্তি
সূত্র
0

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

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

— Ernoriel
সূত্র
-4

আমি দৃ approach়ভাবে এই পদ্ধতির বিরুদ্ধে সুপারিশ করব। টাচ স্ক্রিন, ডেস্কটপ-আকারের ডিভাইসগুলি বিবেচনা করুন এবং আপনার সমস্যার সমাধানের জন্য আলাদা সেট রয়েছে।

মাউস ছাড়াই দয়া করে আপনার অ্যাপটিকে ব্যবহারযোগ্য করে তুলুন (অর্থাত্ কোনও হভার পূর্বরূপ নয়)।

— ক্রিস ব্রডফুট
সূত্র
1
এটাই হ'ল আমি যা করার চেষ্টা করছি। আমি এমন একটি ইন্টারফেস তৈরি করার চেষ্টা করছি যা উভয় ট্যাবলেট (কোনও মাউস নয়) এবং একটি মাউস দিয়ে সবচেয়ে ভালভাবে কাজ করবে তবে এই ইন্টারফেসগুলি অগত্যা খুব আলাদা।
— জন জেনজেট
আমি প্রশস্ত সাথে একমত। আপনি ডিভাইস সনাক্তকরণ (ডিভাইস অ্যাটলাসের মতো) ব্যবহার করে সেরা হন এবং লোডের সময় প্রদত্ত ইন্টারফেসটি নির্বাচন করুন।
— টিমু ইকোনেন
-4

এমন কোনও স্ক্রিপ্টের প্রস্তাব দিতে চাই যা আমাকে সাহায্য করেছিল:

পর্যাপ্ত ফলাফল ছাড়াই আমি প্রস্তাবিত সমস্ত কিছু পড়েছি এবং চেষ্টা করেছিলাম।

তারপরে আমি আরও কিছু তদন্ত করেছি এবং এই কোডটি পেয়েছি - device.js s

আমি এটিকে আমার ক্লায়েন্টের ওয়েবসাইটে ব্যবহার করছি, মাউসের অস্তিত্ব সনাক্ত করতে:
( শ্রেণি <html>হওয়া উচিত desktop) এবং এটি বেশ ভাল বলে মনে হয় এবং touchসমর্থনের জন্য , আমি 'ontouchend' in documentআমার নির্দিষ্ট নির্দিষ্ট জিনিসটি ধরে নিতে কেবল নিয়মিত চেক করি এবং উভয় সনাক্তকরণের তথ্য ব্যবহার করি।

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

ওএস / ব্রাউজারের ধরণ সনাক্তকরণের চেয়ে মাউসওভার ফাংশনটি সমর্থিত কিনা তা সনাক্ত করা ভাল। আপনি নিম্নলিখিতটি দ্বারা কেবল এটি করতে পারেন:

if (element.mouseover) {
    //Supports the mouseover event
}

আপনি নিম্নলিখিতগুলি না করে তা নিশ্চিত হন :

if (element.mouseover()) {
    // Supports the mouseover event
}

পরবর্তীকৃতরা আসলে এর অস্তিত্বের জন্য পরীক্ষা না করে পদ্ধতিটি কল করে।

আপনি এখানে আরও পড়তে পারেন: http://www.quirksmode.org/js/support.html

— মার্কাস সোয়ুপ
সূত্র
2
আপনার পোস্ট থেকে কী পাবেন তা আমি সত্যিই জানি না তবে যদি (body ('বডি') [[0]) সতর্কতা ('onmouseover') এ 'onmouseover' হয়;
— আইফোনেও
1
এটি কেবলমাত্র মাউসওভার ফাংশনটি সংজ্ঞায়িত করা হয়েছে কিনা তা যাচাই করে যা এটি প্রায় সমস্ত ব্রাউজারে থাকবে। এটি কোনও মাউস আসলে উপস্থিত কিনা তা সনাক্ত করে না।
— জন জেনজেট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.