मध्यम क्लिक का उपयोग करते हुए ऑनक्लिक घटना को ट्रिगर करना

Question 1

मैं एक पॉप अप के रूप में onclickखोलने के लिए एक हैशेड लिंक की घटना का उपयोग कर रहा हूं <div>। लेकिन मध्य क्लिक से onclickईवेंट ट्रिगर नहीं होता है, बल्कि केवल hrefलिंक की विशेषता मान लेता है और एक नए पृष्ठ में URL लोड करता है। <div>पॉपअप के रूप में खोलने के लिए मैं मध्य क्लिक का उपयोग कैसे कर सकता हूं ?

Question 2

संपादित करें

यह उत्तर हटा दिया गया है और क्रोम पर काम नहीं करता है । आप शायद ऑक्सलिंक ईवेंट का उपयोग करके सबसे अंत में होंगे , लेकिन कृपया नीचे दिए गए अन्य उत्तरों को देखें।

/ संपादित करें

भिखारियों का उत्तर सही है, लेकिन ऐसा लगता है कि आप मध्य क्लिक की डिफ़ॉल्ट कार्रवाई को रोकना चाहते हैं। किस मामले में, निम्नलिखित शामिल करें

$("#foo").on('click', function(e) {
   if (e.which == 2) {
      e.preventDefault();
      alert("middle button"); 
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>

स्निपेट का विस्तार करें

stopDefault () ईवेंट की डिफ़ॉल्ट कार्रवाई को रोक देगा।

Question 3

मध्य-क्लिक / माउस-व्हील बटन का पता लगाने के लिए, आपको ईवेंट का उपयोग करना होगा auxclick। उदाहरण के लिए:

<a href="https://example.com" onauxclick="func()" id="myLink"></a>

फिर अपनी स्क्रिप्ट फ़ाइल में

function func(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
}

यदि आप इसे जावास्क्रिप्ट (HTML विशेषता का उपयोग किए बिना onauxclick) से करना चाहते हैं , तो आप addEventListenerतत्व के लिए:

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
})

<a id="myLink" href="http://example.com">middle click me</a>

स्निपेट का विस्तार करें

यहाँauxclick घटना के बारे में mdn पेज चेकआउट करें ।

Question 4

आप उपयोग कर सकते हैं

event.button

माउस बटन पर क्लिक करने के लिए पहचानें।

उस पूर्णांक मान को लौटाता है जो बटन को दर्शाता है जो राज्य को बदल देता है।

मानक 'क्लिक' के लिए, आमतौर पर बाएं बटन
मध्य बटन के लिए 1, आमतौर पर व्हील-क्लिक
2 राइट बटन के लिए, आमतौर पर राइट-क्लिक करें

ध्यान दें कि इंटरनेट एक्सप्लोरर में इस सम्मेलन का पालन नहीं किया जाता है: विवरण के लिए QuirksMode देखें।

बटन का क्रम अलग-अलग हो सकता है यह इस बात पर निर्भर करता है कि पॉइंटिंग डिवाइस को कैसे कॉन्फ़िगर किया गया है।

यह भी पढ़ें

किस माउस बटन पर क्लिक किया गया है?

यह पता लगाने के लिए दो गुण हैं कि किस माउस बटन पर क्लिक किया गया है: कौन सा और बटन। कृपया ध्यान दें कि ये गुण हमेशा एक क्लिक ईवेंट पर काम नहीं करते हैं। माउस बटन को सुरक्षित रूप से पता लगाने के लिए आपको मूसडाउन या माउसअप घटनाओं का उपयोग करना होगा।

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});

<a id="foo" href="http://example.com">middle click me</a>

स्निपेट का विस्तार करें

Question 5

मैं आमतौर पर नफरत करता हूं जब लोग समाधान के बजाय विकल्प प्रदान करते हैं, लेकिन चूंकि समाधान पहले ही प्रदान किए जा चुके हैं इसलिए मैं अपने नियम को तोड़ने जा रहा हूं।

मध्य-क्लिक की सुविधा वाली वेबसाइटें जहां ओवरराइड होती हैं, वे वास्तव में मुझे बहुत प्रभावित करती हैं। मैं आमतौर पर मध्य-क्लिक कर रहा हूं क्योंकि मैं वर्तमान सामग्री का अबाधित दृश्य रखते हुए नई सामग्री को एक नए टैब में खोलना चाहता हूं। किसी भी समय आप मध्य-क्लिक कार्यक्षमता को अकेले छोड़ सकते हैं और प्रासंगिक सामग्री को अपने क्लिक किए गए तत्व के HREF विशेषता के माध्यम से उपलब्ध करा सकते हैं, मेरा दृढ़ता से मानना है कि आपको क्या करना चाहिए।

Question 6

jQuery प्रदान करता है .which उस घटना पर विशेषता है जो क्लिक बटन आईडी को बाएं से दाएं 1, 2, 3 के रूप में देता है। इस मामले में आप 2 चाहते हैं।

उपयोग:

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      alert("middle button"); 
   }
});

एडमांटियम का जवाब भी काम करेगा लेकिन आपको IE के लिए बाहर देखने की जरूरत है क्योंकि वह नोट करता है:

$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

यह भी याद रखें कि .buttonविशेषता 0-अनुक्रमित है जैसे 1-अनुक्रमित नहीं है .which।

Question 7

यह सवाल थोड़ा पुराना है, लेकिन मुझे एक समाधान मिला:

$(window).on('mousedown', function(e) {
   if( e.which == 2 ) {
      e.preventDefault();
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

स्निपेट का विस्तार करें

माउस व्हील के लिए क्रोम "फायर" इवेंट नहीं है

एफएफ और क्रोम में काम करते हैं

Question 8

उचित विधि का उपयोग करना है .on, जैसा .liveकि हटा दिया गया है और फिर jQuery से हटा दिया गया है:

$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

या यदि आप "लाइव" महसूस करना चाहते हैं और #fooदस्तावेज़ शुरू होने पर आपके पृष्ठ पर नहीं हैं:

$(document).on('click', '#foo', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

मूल उत्तर

Question 9

मुझे पता है कि मुझे पार्टी के लिए देर हो रही है, लेकिन उन लोगों के लिए जो अभी भी मध्य क्लिक को संभालने में समस्या रखते हैं, यदि आप घटना को देखते हैं तो जांच लें। प्रतिनिधिमंडल के मामले में, clickघटना आग नहीं है। की तुलना करें:

यह मध्य क्लिक के लिए काम करता है:

$('a').on('click', function(){
  console.log('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

स्निपेट का विस्तार करें

यह मध्य क्लिक के लिए काम नहीं करता है:

$('div').on('click', 'a', function(){
  alert('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click here</a>
</div>

स्निपेट का विस्तार करें

यदि आपको अभी भी इवेंट डेलिगेशन का उपयोग करके मध्य क्लिक को ट्रैक करने की आवश्यकता है , तो इसी jQuery टिकट में वर्णित एकमात्र तरीका , उपयोग mousedownया mouseupइसके बजाय है। इस तरह:

यह प्रतिनिधि मध्य क्लिकों के लिए काम करता है:

$('div').on('mouseup', 'a', function(){
  console.log('middle click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click me</a>
</div>

स्निपेट का विस्तार करें

इसे यहाँ ऑनलाइन देखें ।