জাভাস্ক্রিপ্টের সাহায্যে টাচ স্ক্রিন ডিভাইস সনাক্ত করা হচ্ছে

Question

জাভাস্ক্রিপ্ট / jQuery এ, ক্লায়েন্ট ডিভাইসে মাউস থাকলে আমি কীভাবে সনাক্ত করব?

আমি একটি সাইট পেয়েছি যা ব্যবহারকারী যখন কোনও আইটেমের উপরে তাদের মাউসটি ঝাঁকান তখন একটি সামান্য তথ্য প্যানেল স্লাইড করে। হোভারটি সনাক্ত করতে আমি jQuery.hoverInttent ব্যবহার করছি তবে স্পষ্টতই এটি আইফোন / আইপ্যাড / অ্যান্ড্রয়েডের মতো টাচস্ক্রিন ডিভাইসে কাজ করে না। সুতরাং সেই ডিভাইসে আমি তথ্য প্যানেলটি দেখানোর জন্য আলতো চাপতে চাই।

Comments

আপনি দুজনই করতে পারবেন না কেন? টাচস্ক্রীন ডিভাইসে কি ট্যাপ কার্যকারিতা অযাচিত?

— EMPraptor

যেহেতু কিছু নতুন ডিভাইস সমর্থন করে না :hover, :hoverবিশুদ্ধরূপে প্রসাধনী উদ্দেশ্যে ব্যবহার করা এটি সম্ভবত আরও ভাল (একাধিক ডিভাইসের জন্য একটি স্টাইলশিট কোড করার সময়) ।

— উঁচ্ছবৃত্তি করা

@ এমপ্র্যাপ্টর: ভাল কথা - হ্যাঁ আমি এটি করতে পারতাম। তবে ... আমরা সবসময় টাচস্ক্রিন ডিভাইসে প্যানেলটি দেখানোর কথা ভাবছিলাম - এই ক্ষেত্রে আমার সমর্থন সনাক্ত করতে সক্ষম হওয়া দরকার।

— ব্র্যাড রবিনসন

আপনি যদি সর্বদা টাচস্ক্রিন ডিভাইসে প্যানেলটি প্রদর্শন করতে পারেন তবে আপনি অন্যান্য ডিভাইসেও এটি প্রদর্শন করতে পারবেন না? প্যানেলটি কত বড় এবং কেন কেবল তা কেবল হোভার / ট্যাপে প্রদর্শন করা বাঞ্ছনীয়?

— EMPraptor

জাভাস্ক্রিপ্ট ব্যবহার করে কোনও 'টাচ স্ক্রিন' ডিভাইস সনাক্ত করার সর্বোত্তম

— অ্যান্ড্রু হুইটেকার

Answer 1

hoverএবং clickউভয়ের জন্য +1 । আর একটি উপায় হ'ল সিএসএস মিডিয়া ক্যোয়ারী ব্যবহার করা এবং কেবল ছোট স্ক্রিন / মোবাইল ডিভাইসগুলির জন্য কিছু স্টাইল ব্যবহার করা যেতে পারে, যা স্পর্শ / ট্যাপ কার্যকারিতা সম্ভবত সবচেয়ে বেশি most সুতরাং আপনার যদি সিএসএসের মাধ্যমে কিছু নির্দিষ্ট শৈলী থাকে এবং jQuery থেকে আপনি মোবাইল ডিভাইস শৈলীর বৈশিষ্ট্যগুলির জন্য সেই উপাদানগুলিকে চেক করেন যাতে আপনি মোবাইল নির্দিষ্ট কোড লিখতে পারেন।

এখানে দেখুন: http : //www.forabe beautyweb.com/blog/about/hardboiled_css3_media_queries/

Comments

ভাল সমাধান, আপনি সম্ভবত একটি () বাইন্ডের সাহায্যে হোভার চেকের মতো কিছু করতে পারেন যাতে এটি কেবল প্রথমবারের মতো আগুন জ্বলে।

— তীমথিয় পেরেজ

সমস্যাটি হ'ল যদি আপনি পর্দার প্রস্থ অনুসারে লক্ষ্যবস্তু করেন তবে আপনি যখন আপনার ডিভাইসটি ঘোরান (আসুন আইফোন 6+ 736x414 নিতে পারি) এতে একই ধরণের স্টাইল থাকবে না। তাই সেরা সমাধান নয়: /

— এন্টনি

Answer 2

var isTouchDevice = 'ontouchstart' in document.documentElement;

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

Comments

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

— স্টু কক্স

আইই 10 টাচ সনাক্ত করতে আমি ব্যবহার করছি:

— আলেকজান্ডার কেললেট

'ontouchstart' in document.documentElement ব্ল্যাকবেরি 9300

— সহজ

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

— বার্নি

funnyItsNotCamelCaseAsJsIsThroughout। মানে মানুষ এখন কোডটি অনুলিপি, আটকানো এবং সম্পাদনা করতে হবে .. :)

— রস

Answer 3

উইন্ডোটির জন্য পরীক্ষার সন্ধান পেয়েছে। টাচ অ্যান্ড্রয়েডে কাজ করেনি তবে এটি করে:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

নিবন্ধটি দেখুন: জাভাস্ক্রিপ্ট ব্যবহার করে কোনও 'টাচ স্ক্রিন' ডিভাইস সনাক্ত করার সেরা উপায় কী?

Comments

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

— একত্রিত করুন

Answer 4

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

এমএসম্যাক্স টাচপয়েন্ট সহ সর্বাধিক টাচপয়েন্ট ব্যবহার করার কারণ:

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

সূত্র: http://ctrlq.org/code/19616-detect-touch-screen-javascript

Comments

এটি গুগল ক্রোম বিকাশকারী সরঞ্জামগুলির

— অনুকরণকারী

Answer 5

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

যেখানেই কাজ করে !!

Comments

এবং যে একটি মাউস সঙ্গে কি আছে? (আসল প্রশ্ন)

— হেক্সালিজ

এটি করা সহজ হবেisTouch = "ontouchstart" in window || navigator.msMaxTouchPoints;

— অ্যান্ড্রু

Answer 6

আমি ব্যবহার করি:

if(jQuery.support.touch){
    alert('Touch enabled');
}

jQuery মোবাইল 1.0.1

Comments

jQuery jQuery.support আধুনিকীকরণের ( আধুনিকীকরণ.কম ) এর পক্ষে ব্যবহারের বিরুদ্ধে সুপারিশ করেছে : রেফারেন্স - api.jquery.com/jQuery.support -

— জোনাথন

Answer 7

গুগল ক্রোম মনে হচ্ছে এটিতে মিথ্যা ইতিবাচক প্রত্যাশা রয়েছে:

var isTouch = 'ontouchstart' in document.documentElement;

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

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

আমি যে ব্রাউজারগুলিতে এই কোডটি চালিয়েছি তা টাইপফুলটি "অবজেক্ট" তবে আমি আরও নিশ্চিত বোধ করছি যে এটি যাই হোক না কেন অপরিজ্ঞাত :-)

আই 7, আই 8, আই 9, আই 10, ক্রোম 23.0.1271.64, আইপ্যাডের জন্য ক্রোম 21.0.1180.80 এবং আইপ্যাড সাফারি। যদি আরও কিছু পরীক্ষা করে ফলাফল ভাগ করে নেওয়া হয় তবে এটি দুর্দান্ত।

Comments

দুটি পদ্ধতিই এফএফ 23 এবং ক্রোম 28 এর সাথে উইন 8 পিসিতে মিথ্যা ইতিবাচক প্রত্যাবর্তন করে this আমার কাছে "এমুলেটেট টাচ ইভেন্টগুলি" বিকল্প সেট নেই।

— টাইফন

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

— অ্যাশ

এই দু'জনই অ-টাচ ল্যাপটপে উবুন্টু ফায়ারফক্সে সত্য হয়ে যায়।

— NoBugs

Answer 8

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

আপনি যদি jQuery ব্যবহার করছেন

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

বা খাঁটি জেএস ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Comments

যদিও সাবধান থাকুন: কমপক্ষে আইপ্যাডগুলি

— অন

আপেল!

— টিমোথি পেরেজ

এবং উইন্ডোজ ট্যাবলেটে IE ব্যবহার করা লোকেরা স্পর্শ এবং মাউস উভয়ই ব্যবহার করতে চাইতে পারে।

— সেবাজ্জজ

উইন্ডোজ ট্যাবলেট অস্তিত্বের আগে এই পোস্টটি তৈরি করা হয়েছিল।

— টিমোথি পেরেজ

@ s427 - আই ফেচিং ... আইই 8 এর জন্য কেবল একটি চেক করুন। আমি মনে করি না <<আইই 8 সহ কোনও মোবাইল ডিভাইস রয়েছে।

— টিমোথি পেরেজ

Answer 9

আমার প্রথম পোস্ট / মন্তব্যের জন্য: আমরা সকলেই জানি যে ক্লিকের আগে 'টাচস্টার্ট' ট্রিগার হয়। আমরা আরও জানি যে ব্যবহারকারী যখন আপনার পৃষ্ঠাটি খুলবেন তিনি বা সে: 1) মাউসটি সরান 2) 3 ক্লিক করুন) স্ক্রিনটি স্পর্শ করুন (স্ক্রোলিংয়ের জন্য, বা ... :))

আসুন কিছু চেষ্টা করুন:

// -> শুরু: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- শেষ: jQuery

আপনার দিনটি শুভ হোক!

Answer 10

আমি আলোচনায় উপরে বর্ণিত নিম্নলিখিত কোডটি পরীক্ষা করেছি

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

আইফোনটিতে অ্যান্ড্রয়েড মোজিলা, ক্রোম, অপেরা, অ্যান্ড্রয়েড ডিফল্ট ব্রাউজার এবং সাফারি নিয়ে কাজ করে ... সব ধনাত্মক ...

আমার জন্য শক্ত মনে হচ্ছে :)

Comments

সুপার সহজ এবং আমার জন্য কাজ করে। অ্যান্ড্রয়েড (পুরানো গ্যালাক্সি নোট) এবং অনুকরণকারী (ক্রোম) এবং আইপ্যাডে পরীক্ষিত।

— রাল্ফ

Chrome এ আমার জন্য একটি মিথ্যা ইতিবাচক ফেরত দেয়।

— জেমস

Answer 11

বিষয়টিতে একটি সহায়ক ব্লগ পোস্ট, স্পর্শ ইভেন্টগুলি সনাক্ত করার জন্য মডারিনিজার উত্সের মধ্যে থেকে লিঙ্কযুক্ত। উপসংহার: জাভাস্ক্রিপ্ট থেকে টাচস্ক্রিন ডিভাইসগুলি নির্ভরযোগ্যভাবে সনাক্ত করা সম্ভব নয়।

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

Answer 12

এটি আমার পক্ষে কাজ করে:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

Comments

আপনি কতগুলি প্ল্যাটফর্ম, ব্রাউজার, ওএস ', ডিভাইসগুলির পরীক্ষা করেছেন?

— বার্গগ্রিনডি কে

এফএফ, ক্রোম, অ্যান্ড্রয়েড এবং আইওএস (আইপ্যাড) এ সাফারি

— টার্টলট্রিল

যথেষ্ট ভাল। আমি কেবল ডেস্কটপে পরীক্ষা করেছি এবং প্রচুর "অপরিজ্ঞাত" পেয়েছি যা আইএফ কাঠামোটিকে কিছুটা হ্যাক করে তোলে। আপনি যদি আপনার রিটার্নের মানটি সামান্য সামঞ্জস্য করেন তবে: সত্যটি ফিরে আসুন == (উইন্ডোতে "অ্যান্টিচস্টার্ট" || উইন্ডোতে oc ডকুমেন্টটিউচ এবং & দস্তাবেজ উদাহরণস্বরূপ ডকুমেন্টটিউচ); তারপরে আপনার সত্য বা মিথ্যা রয়েছে :-)

— বার্গগ্রিনডি কে

ক্রোমে উইন্ডোতে থাকা "অন্টচস্টার্ট" টাচ স্ক্রিন ছাড়া আমার পিসিতে সত্য, তাই এটি কাজ করে না। পূর্বে মন্তব্য হিসাবে, ব্রাউজার টাচ-সক্ষম হলে এই পরীক্ষা করে tests এছাড়াও, সত্য == কিছু করে না এবং বাদ দেওয়া উচিত।

— রাকেন্সি

আমি যখন এটি এমুলেটরটিতে অন্তর্নির্মিত সহ Chrome এ চেষ্টা করি, এটি যখন এমুলেটরটিতে স্যুইচ করা থাকে তখন এটি স্পর্শ সনাক্ত করে এবং এটি বন্ধ করা অবস্থায় স্পর্শ সনাক্ত করতে পারে না। সুতরাং আমার জন্য কাজ করে। তবে: আমি প্রসাদ দ্বারা সংক্ষিপ্ত সংস্করণ ব্যবহার (নীচে) যা ব্যবহার করে না || টার্টলট্রিলের কোডে। এবং: এটি যদি 100% ডিভাইসের জন্য কাজ করে তবে আমার কোনও যত্ন নেই। 99% আমার জন্য কাজ করবে।

— রাল্ফ

Answer 13

আপনি যদি মডার্নজার ব্যবহার করেন তবে এটি Modernizr.touchপূর্বে উল্লিখিত হিসাবে ব্যবহার করা খুব সহজ ।

তবে, আমি Modernizr.touchনিরাপদ থাকার জন্য এবং ব্যবহারকারীর এজেন্ট পরীক্ষার সংমিশ্রণটি ব্যবহার করতে পছন্দ করি ।

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

আপনি যদি মডার্নিজার ব্যবহার না করেন তবে Modernizr.touchউপরের ফাংশনটি কেবল সাথে প্রতিস্থাপন করতে পারেন('ontouchstart' in document.documentElement)

এছাড়াও নোট করুন যে ব্যবহারকারী এজেন্টের পরীক্ষা করা iemobileআপনাকে সনাক্ত করা মাইক্রোসফ্ট মোবাইল ডিভাইসের বিস্তৃত পরিসর দেয়Windows Phone ।

এই এসও প্রশ্নটি দেখুন

Comments

এখন 4 টি প্রশ্নের জন্য কি একই প্রতিক্রিয়া ... এবং তিনি যে প্রশ্নটি করছেন তার সমাধান এটি নয় not

— jycr753

আমি বিশ্বাস করি এটি এখানে প্রশ্নের উত্তর দেয়

— পিটার-প্যান

এটি উত্তর নয় তবে এটি এমন একটি ইঙ্গিত যা আমি মনে করি কার জন্য ব্যবহারকারীরা এটি স্পর্শ করার আগে ডিভাইসটি স্পর্শযোগ্য কিনা তা সনাক্ত করতে চান

— শাহাদাত হোসেন খান

Answer 14

JQuery মোবাইলে আপনি সহজভাবে এটি করতে পারেন:

$.support.touch

কেন এটি এত অননুমোদিত তা জানেন না .. তবে এটি ক্রসব্রোজার নিরাপদ (বর্তমান ব্রাউজারগুলির সর্বশেষ 2 সংস্করণ)।

Answer 15

ইতিমধ্যে উল্লিখিত হিসাবে, একটি ডিভাইস উভয় মাউস এবং টাচ ইনপুট সমর্থন করতে পারে। খুব প্রায়ই, প্রশ্নটি "কী সমর্থিত" নয় তবে "বর্তমানে কী ব্যবহৃত হয়" তা নয়।

এই ক্ষেত্রে, আপনি কেবল মাউস ইভেন্টগুলি (হোভার শ্রোতা সহ) নিবন্ধভুক্ত করতে পারেন এবং একইভাবে ইভেন্টগুলি স্পর্শ করতে পারেন।

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

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

মনে রাখবেন যে কোনও স্পর্শ উভয় ধরণের শ্রোতা, স্পর্শ এবং মাউসকে আগুন দিতে পারে। তবে, টাচ শ্রোতা প্রথমে যায় এবং পরবর্তী মাউস শ্রোতাদের কল করে গুলি চালানো থেকে রোধ করতে পারে event.preventDefault()।

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

এখানে আরও পড়া ।

Answer 16

আইপ্যাড বিকাশের জন্য আমি ব্যবহার করছি:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

এরপরে আমি নির্বাচিতভাবে টাচ ভিত্তিক ইভেন্টগুলিতে (যেমন অন্টচাস্টার্ট) বা মাউস ভিত্তিক ইভেন্টগুলি (যেমন অনময়েডাউন) আবদ্ধ করতে পারি। আমি এখনও অ্যান্ড্রয়েডে পরীক্ষা করিনি।

Comments

এটি অপেরা মোবাইল 10 বা ইন্টারনেট এক্সপ্লোরার মোবাইল 6 (উইন্ডোজ মোবাইল 6.5) এর সাথে কাজ করে না।

— ডাবলজে

খারাপ ক্রসব্রোজার / ক্রস ওএস / ক্রস প্ল্যাটফর্মের পরামর্শ।

— বার্গগ্রিনডি কে