জাভাস্ক্রিপ্ট: মাউস বোতাম নিচে কিনা তা পরীক্ষা করে দেখুন?


136

মাউস বোতামটি বর্তমানে জাভাস্ক্রিপ্টে ডাউন আছে কিনা তা সনাক্ত করার কোনও উপায় আছে?

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

এটা কি সম্ভব?


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

@ জ্যাক এটি আমার প্রশ্নের উত্তর দেয়। আমার প্রশ্নটি পড়ুন এবং তারপরে উত্তরটি পড়ুন। দৃশ্যত 100 টিরও বেশি লোক সম্মত হন যে এটি একটি ভাল উত্তর ছিল।
টিএম

4
হ্যাঁ .. তবে আমি, আলফ্রেড এবং অন্যান্য 8 জন আপনাকে বলছে যে মাউসআপ এবং মাউসডাউন ট্র্যাক করা সঠিক উপায় নয়। সঠিক উত্তরের সাথে আপনার পছন্দের হ্যান্ডলারের ইভেন্ট অবজেক্টের বিশ্লেষণ, বা ইভেন্ট-চালিত চেকের পরিবর্তে সময়-চালিত চেকের প্রয়োজন হলে আপনার মাউস সম্পর্কিত সমস্ত ইভেন্টের বিশ্লেষণ (যেমন প্রবেশ / প্রস্থান যেমন) জড়িত থাকা উচিত।
জ্যাক

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

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

উত্তর:


147

প্যাক্সের সমাধান সম্পর্কিত: ব্যবহারকারী যদি ইচ্ছাকৃতভাবে বা দুর্ঘটনাক্রমে একাধিক বোতাম ক্লিক করেন তবে এটি কাজ করে না। আমি কীভাবে জানি আমাকে জিজ্ঞাসা করবেন না :-(।

সঠিক কোডটি এর মতো হওয়া উচিত:

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

এই মত পরীক্ষার সাথে:

if(mouseDown){
  // crikey! isn't she a beauty?
}

কোন বোতামটি টিপছে তা আপনি যদি জানতে চান তবে মাউসডাউনকে কাউন্টারগুলির একটি অ্যারে তৈরি করতে প্রস্তুত করুন এবং পৃথক বোতামগুলির জন্য পৃথকভাবে গণনা করুন:

// let's pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
    mouseDownCount = 0;
document.body.onmousedown = function(evt) { 
  ++mouseDown[evt.button];
  ++mouseDownCount;
}
document.body.onmouseup = function(evt) {
  --mouseDown[evt.button];
  --mouseDownCount;
}

এখন আপনি কী বোতামগুলি ঠিক টিপেছিলেন তা পরীক্ষা করতে পারেন:

if(mouseDownCount){
  // alright, let's lift the little bugger up!
  for(var i = 0; i < mouseDown.length; ++i){
    if(mouseDown[i]){
      // we found it right there!
    }
  }
}

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

  • "কিছুই চাপছে না" এর জন্য 0
  • বাম দিকে 1
  • ডান জন্য 2
  • মাঝারি জন্য 4
  • এবং উপরের যে কোনও সংমিশ্রণ, যেমন বাম + মাঝের জন্য 5

সুতরাং সেই অনুযায়ী আপনার কোড সামঞ্জস্য করুন! আমি এটি একটি অনুশীলন হিসাবে ছেড়ে।

এবং মনে রাখবেন: আইই… "ইভেন্ট" নামে একটি বিশ্বব্যাপী ইভেন্ট অবজেক্ট ব্যবহার করে।

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

// for IE only!
document.body.onmousemove = function(){
  if(event.button){
    // aha! we caught a feisty little sheila!
  }
};

অবশ্যই সে কিছুই না পেয়ে যদি সে মৃত খেলে এবং নাড়তে না পারে।

প্রাসঙ্গিক লিঙ্ক:

আপডেট # 1 : আমি জানি না কেন আমি ডকুমেন্ট.বডি স্টাইলে কোড বহন করেছি। সরাসরি ডকুমেন্টের সাথে ইভেন্ট হ্যান্ডলার সংযুক্ত করা ভাল।


1
পরীক্ষার পরে, এটি প্রদর্শিত হয় যে evt.button আসলে আই 7 এর সাথে onmousem উপস্থিত নেই ...
টিএম।

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

1
আমি আপনার সমাধানটি পছন্দ করি, তবে কী যদি মাউসটি কোনও ভিন্ন অ্যাপ্লিকেশন থেকে আসে তবে এমএস শব্দটি এবং এর কিছু পাঠ্য টেনে নিয়ে যায়। আপনি কীভাবে আবিষ্কার করবেন যে মাউসটি নিচে রয়েছে?
শদ্রাক বি। অরিনা

6
আমি বুঝতে পারছি না আপনি কেন দ্বিতীয় উদাহরণে মোডসাউন অ্যারে এল্টগুলি বাড়িয়ে দিচ্ছেন। কেন প্রতিটি বোতামের জন্য একটি বোনের পরিবর্তে প্রতিটি বোতামের জন্য একটি কাউন্টার?
অ্যাম্বিটার

2
এটি একটি সত্যই জনপ্রিয় প্রশ্ন (এবং উত্তর)। আমি অবাক হয়েছি এটি এখনও পর্যন্ত আসে নি, তবে আপনাকে মাউস ডেটা সংরক্ষণ করার দরকার নেই। event.buttonsবাহ্যিক সংরক্ষিত ভেরিয়েবলগুলি ব্যতীত আপনি যে ইভেন্ট ইভেন্ট ট্রিগারটি ব্যবহার করছেন তা কেবল প্লাগ করতে পারেন । আমি একেবারে নতুন প্রশ্ন জিজ্ঞাসা করেছি (কারণ আমার মাউসআপ ইভেন্টটি সর্বদা আগুন লাগে না, সুতরাং এই সমাধানটি আমার পক্ষে কার্যকর হয় না) এবং সম্ভবত উত্তরটি 5 মিনিটের শীর্ষে পেয়ে গেল।
রোবোটিক রেনেসাঁ

32

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

তবে মাউসএভেন্ট (এখন) ইঙ্গিত দেয় যে বর্তমানে কোন বোতামটি পুশ করা হয়েছে:

  • সমস্ত আধুনিক ব্রাউজারের জন্য (সাফারি বাদে) ব্যবহার করুন MouseEvent.buttons
  • সাফারির জন্য, ব্যবহার করুন MouseEvent.which( buttonsসাফারির জন্য অপরিবর্তিত থাকবে) দ্রষ্টব্য: ডান এবং মধ্য ক্লিকের জন্য whichপৃথক নম্বর ব্যবহার buttonsকরে।

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

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

var leftMouseButtonOnlyDown = false;

function setLeftButtonState(e) {
  leftMouseButtonOnlyDown = e.buttons === undefined 
    ? e.which === 1 
    : e.buttons === 1;
}

document.body.onmousedown = setLeftButtonState;
document.body.onmousemove = setLeftButtonState;
document.body.onmouseup = setLeftButtonState;

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


6
এই কোডটি কেবলমাত্র প্রাথমিক বোতাম টিপছে কিনা তা পরীক্ষা করে এবং অন্য সমস্ত বোতামটি চাপবিহীন করা দরকার। (যেমন যদি প্রধান অথবা দ্বিতীয় উভয়ের চাপা হয়, e.buttonsহতে হবে 1+2=3, তাই e.buttons === 1মিথ্যা হতে হবে)। আপনি যদি প্রাথমিক বোতামটি ডাউন আছে কিনা তা যাচাই করতে চান তবে অন্য কোনও বোতামের বিবরণে যত্ন নেই, এটি করুন:(e.buttons & 1) === 1
এজে রিচার্ডসন

আমার এমন পরিস্থিতি রয়েছে যেখানে আমি আশা করছি যে একটি মাউসমেভের সময় আমার বোতাম কোডটি '1' হওয়া উচিত তবে এটি '7' তৈরি করে - সমস্ত কাজ ক্রোমে রয়েছে। কারও কোন ধারণা আছে?
ভ্যাসিলি হল

@ ভ্যাসিলিহল এমডিএন ডক্সের দিকে তাকিয়ে MouseEvent.buttonsমনে হচ্ছে এর 7অর্থ হল যে এটি মনে করে যে প্রাথমিক, মাধ্যমিক এবং সহায়তার বোতামগুলি একসাথে চাপছে। আমি নিশ্চিত না কেন এটি হবে - আপনি কি উন্নত মাউস ব্যবহার করছেন? যদি তা হয় তবে সম্ভবত এটি একটি মৌলিক সাথে চেষ্টা করার মতো। আপনার যদি এটি চালিয়ে যাওয়া প্রয়োজন হয় তবে বাম বোতামটি টিপছে কিনা তা নিশ্চিত করতে আপনি অন্যদিকে কিছুটা চেক ব্যবহার করতে পারেন এবং অন্যকে অগ্রাহ্য করতে পারেন। যেমন। MouseEvent.buttons & 1 === 1
জোনো জোব

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

16

আমি মনে করি এটির সর্বোত্তম পন্থা হ'ল মাউস বোতামের স্থিতির নিজের রেকর্ডটি রাখা, নিম্নরূপ:

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

এবং তারপরে, পরে আপনার কোডে:

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

+1, এবং ধন্যবাদ আমি ভেবেছিলাম আমার এটিকে অবলম্বন করতে হবে তবে আমি আশা করছিলাম এমন কোনও বৈশিষ্ট্য রয়েছে যা আপনাকে কেবল রাজ্যটি সরাসরি পরীক্ষা করতে দেয়।
টিএম

12
বুলিয়ান ব্যবহার না করার কোনও কারণ আছে কি?
মোয়ালা

1
@ মোয়ালা আমার মনে হয় অন্তত টাইপিং কম দেখা যাচ্ছে, এবং শেষ পর্যন্ত কিছুটা ভাল পারফরম্যান্স: jsperf.com/bool-vs-int
জনাথন এলমোর

12

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

আই.ইভেন্ট অবজেক্টটি ব্যবহার করা একমাত্র ভাল সমাধান।


11
আমি দেখতে পাচ্ছি আপনি কোথা থেকে এসেছেন, তবে কেবলমাত্র আইইয়ের জন্য কাজ করে এমন একটি সমাধান থাকা ভাল সমাধান নয়।
টিএম

@ অ্যালফ্রেড কিছু ক্ষেত্রে এটি জানার জন্য সহায়তা করতে পারে যে মাউসমাভ উইন্ডোটির বাইরে রয়েছে কিনা। যদি (event.target.nodeName.toLowerCase === 'HTML') = 0 নিচে;
বিএফ

6

আমি জানি এটি একটি পুরানো পোস্ট, তবে আমি ভেবেছিলাম মাউস আপ / ডাউন ব্যবহার করে মাউস বোতামটি ট্র্যাকিং কিছুটা বিশৃঙ্খল অনুভূত হয়েছে, তাই আমি এমন একটি বিকল্প খুঁজে পেয়েছি যা কারও কাছে আবেদন করে।

<style>
    div.myDiv:active {
        cursor: default;
    }
</style>

<script>
    function handleMove( div ) {
        var style = getComputedStyle( div );
        if (style.getPropertyValue('cursor') == 'default')
        {
            // You're down and moving here!
        }
    }
</script>

<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>

সক্রিয় নির্বাচনকারী মাউস উপরের / নীচের চেয়ে মাউস ক্লিককে হ্যান্ডল করে, আপনার কেবলমাত্র অনমাসমোভ ইভেন্টে সেই স্টেটটি পড়ার একটি উপায় প্রয়োজন। তার জন্য আমাকে প্রতারণা এবং নির্ভর করতে হয়েছিল যে ডিফল্ট কার্সারটি "অটো" এবং আমি কেবল এটি "ডিফল্ট" এ পরিবর্তন করি যা ডিফল্টরূপে অটো নির্বাচন করে।

আপনি অবজেক্টে এমন কিছু ব্যবহার করতে পারেন যা getComputesStyle দ্বারা ফিরে আসে যা আপনি নিজের পৃষ্ঠার চেহারা যেমন বিরক্ত না করে পতাকা হিসাবে ব্যবহার করতে পারেন যেমন সীমানা-রঙ।

সক্রিয় বিভাগে আমি নিজের ব্যবহারকারীর সংজ্ঞায়িত স্টাইলটি সেট করতে পছন্দ করতাম, তবে আমি এটি কাজ করতে পারি না। এটা সম্ভব হলে আরও ভাল হত।


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

4

নিম্নলিখিত স্নিপেট মাউসডাউন ইভেন্টটি ডকুমেন্ট.বেডিড হওয়ার পরে 2 সেকেন্ড পরে "ডু স্টাফ" ফাংশনটি কার্যকর করার চেষ্টা করবে। ব্যবহারকারী যদি বোতামটি উপরে তুলে রাখে, তবে মাউসআপ ইভেন্টটি ঘটবে এবং বিলম্বিত সম্পাদন বাতিল করে।

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

function doStuff() {
  // does something when mouse is down in body for longer than 2 seconds
}

var mousedownTimeout;

document.body.onmousedown = function() { 
  mousedownTimeout = window.setTimeout(doStuff, 2000);
}

document.body.onmouseup = function() {
  window.clearTimeout(mousedownTimeout);
}

ধন্যবাদ, তবে এটি ঠিক এমন আচরণ নয় যা আমি খুঁজছিলাম (যদিও আমি দেখতে পাচ্ছি যে আমার প্রশ্নটি ইঙ্গিত করে যে আমি এটি করার চেষ্টা করছি)।
টিএম

3

স্বল্প ও মধুর

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

বডি ট্যাগ যুক্ত করুন:

onmouseup="down=0;" onmousedown="down=1;"

তারপরে সমান myfunction()হলে পরীক্ষা এবং downসম্পাদন করুন 1:

onmousemove="if (down==1) myfunction();"

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

5
যাইহোক, আমি আপনার সমাধানটি ভোট দিয়েছি, কারণ এটি বৈধ এবং আপনি এসও
জ্যাকারি নাইবল

2

আপনি @ প্যাক্স এবং আমার উত্তরগুলিকে একত্রিত করতে পারেন যা মাউসটি যে সময়কালের জন্য নিচে চলেছে তা পেতে:

var mousedownTimeout,
    mousedown = 0;

document.body.onmousedown = function() {
  mousedown = 0; 
  window.clearInterval(mousedownTimeout);
  mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
}

document.body.onmouseup = function() {
  mousedown = 0;
  window.clearInterval(mousedownTimeout);
}

তাহলে পরে:

if (mousedown >= 2000) {
  // do something if the mousebutton has been down for at least 2 seconds
}

এটা খারাপ ধারণা নয়, জেক। আপনি কি 0 এ মাউসডাউন সেট করার আগে অনমাইজআপ () এ অন্তর্নিহিত () পরিষ্কার করতে হবে? আমি টাইমার ফাংশনটি 0 এ সেট করা এবং টাইমার বন্ধ করার সাথে সাথে টাইমআউট 200 ছাড়িয়ে যাওয়ার বিষয়ে সতর্কতা অবলম্বন করছি? একইভাবে অনমনেডাউন।
paxdiablo

ক্লিয়ারআইন্টারভালসের ক্রম কোনও তত্পরতা আনতে চলেছে না কারণ যে কোনও ইভেন্টে (টাইমার সহ) আগুন লাগার আগে মৃত্যুদণ্ড কার্যকর করার বর্তমান থ্রেডটি শেষ হবে।
নাথানিয়েল রেইনহার্ট

2

আপনার মাউসডাউন এবং মাউসআপ পরিচালনা করতে হবে এবং এটি "পরে রাস্তার নিচে" ট্র্যাক করতে কিছু পতাকা বা কিছু সেট করতে হবে ... :(


2

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

অতিরিক্ত হিসাবে, আপনি event.whichপ্রকৃত ব্যবহারকারী ইন্টারঅ্যাকশন পরিচালনা করছেন এবং মাউস ইভেন্টগুলি নয়, তা নিশ্চিত করার জন্য আপনি যাচাই করতে চাইতে পারেন elem.dispatchEvent(new Event('mousedown'))

var isMouseDown = false;

document.addEventListener('mousedown', function(event) { 
    if ( event.which ) isMouseDown = true;
}, true);

document.addEventListener('mouseup', function(event) { 
    if ( event.which ) isMouseDown = false;
}, true);

ডকুমেন্টের পরিবর্তে ডকুমেন্টে (বা উইন্ডো) হ্যান্ডলার যুক্ত করুন। যে কেউ গুরুত্বপূর্ণ বি / সি এটি নিশ্চিত করে যে উইন্ডোর বাইরের মাউসআপ ইভেন্টগুলি এখনও রেকর্ড করা আছে।


1

মাউসএভেন্ট এপিআই ব্যবহার করে চাপা বোতামটি পরীক্ষা করতে যদি থাকে তবে:

document.addEventListener('mousedown', (e) => console.log(e.buttons))

ফিরে :

এক বা একাধিক বোতাম উপস্থাপন করে এমন একটি সংখ্যা। একসাথে একাধিক বোতাম টিপে, মানগুলি একত্রিত হয় (উদাহরণস্বরূপ, 3 প্রাথমিক + মাধ্যমিক)।

0 : No button or un-initialized
1 : Primary button (usually the left button)
2 : Secondary button (usually the right button)
4 : Auxilary button (usually the mouse wheel button or middle button)
8 : 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)

0

JQuery ব্যবহার করে, নিম্নলিখিত সমাধান এমনকি "পৃষ্ঠাটি টানুন তারপর কেস রিলিজ করুন" পরিচালনা করে।

$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

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


0

নীচে jQuery উদাহরণস্বরূপ, যখন মাউস $ ('। উপাদান') এর উপরে চলে যায় তখন কোন মাউস বোতাম টিপবে তার উপর নির্ভর করে রঙ পরিবর্তন হয়।

var clicableArea = {
    init: function () {
        var self = this;
        ('.element').mouseover(function (e) {
            self.handlemouseClick(e, $(this));
        }).mousedown(function (e) {
            self.handlemouseClick(e, $(this));
        });
    },
    handlemouseClick: function (e, element) {
        if (e.buttons === 1) {//left button
            element.css('background', '#f00');
        }
        if (e.buttons === 2) { //right buttom
            element.css('background', 'none');
        }
    }
};
$(document).ready(function () {
    clicableArea.init();
});

0

@ জ্যাক যেমন বলেছেন, mouseupব্রাউজার উইন্ডোর বাইরে যখন ঘটে তখন আমরা সে সম্পর্কে অবহিত নই ...

এই কোডটি (প্রায়) আমার পক্ষে কাজ করেছিল:

window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);

দুর্ভাগ্যক্রমে, আমি mouseupসেগুলির একটিতে ইভেন্টটি পাব না :

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

-1

ঠিক আছে, ইভেন্টের পরে এটি নিচে রয়েছে কিনা তা আপনি পরীক্ষা করতে পারবেন না, তবে এটি উপরে রয়েছে কিনা তা আপনি পরীক্ষা করতে পারবেন ... যদি এটি আপ হয় .. তার মানে এই যে আর আর নিচে নেই: পি এল

সুতরাং ব্যবহারকারী বোতামটি টিপুন (অনমাউসডাউন ইভেন্ট) ... এবং তারপরে, আপনি পরীক্ষা করছেন কিনা (অনমাউসআপ)। এটি শেষ না হওয়ার পরে আপনি যা প্রয়োজন তা করতে পারেন।


2
অন-মাউসআপ কি কোনও ইভেন্টও নয়? আপনি কীভাবে "সম্পত্তি" অনমઉસআপ চেক করবেন? বা কার সম্পত্তি, বরং?
রোহিত

@ রোহিত: আপনি সম্পত্তি যাচাই করেন না, আপনি এমন একটি পতাকা পরিচালনা করেন যা নির্দেশ করে যে ঘটনাটি ঘটেছে ... মাউস বোতামটি নীচে বা নীচে রয়েছে।
ফিলিহো

-1
        var mousedown = 0;
        $(function(){
            document.onmousedown = function(e){
                mousedown = mousedown | getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.onmouseup = function(e){
                mousedown = mousedown ^ getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.oncontextmenu = function(e){
                // to suppress oncontextmenu because it blocks
                // a mouseup when two buttons are pressed and 
                // the right-mouse button is released before
                // the other button.
                return false;
            }
        });

        function getWindowStyleButton(e){
            var button = 0;
                if (e) {
                    if (e.button === 0) button = 1;
                    else if (e.button === 1) button = 4;
                    else if (e.button === 2) button = 2;  
                }else if (window.event){
                    button = window.event.button;
                }
            return button;
        }

এই ক্রস ব্রাউজার সংস্করণটি আমার পক্ষে ভাল কাজ করে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.