जावास्क्रिप्ट के साथ एक क्लिक का अनुकरण कैसे करें?

Question

मैं बस सोच रहा हूं कि मैं एक तत्व पर एक क्लिक का अनुकरण करने के लिए जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं।

वर्तमान में मेरे पास है:

<script type="text/javascript">
function simulateClick(control)
{
    if (document.all)
    {
        control.click();
    }
    else
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        control.dispatchEvent(evObj);
    }
}
</script>

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

लेकिन यह काम नहीं कर रहा है :(

कोई विचार?

Comments

"फाइव मोस्ट कॉमन कोडिंग एरर्स": javascript.about.com/od/hintsandtips/a/worst_4.htm - बस कोई भी IE4 नहीं चलाता है और इसलिए document.all DOM के लिए समर्थन की आवश्यकता नहीं है। यह वास्तव में आश्चर्यजनक है कि कितने लोग अभी भी अपने कोडिंग में इसका उपयोग करते हैं। इससे भी बुरी बात यह है कि डॉक्यूमेंट के लिए समर्थन .all DOM का उपयोग ब्राउज़र को निर्धारित करने के लिए अक्सर किया जाता है और यदि यह समर्थित है, तो कोड मानता है कि ब्राउज़र इंटरनेट एक्सप्लोरर है (जो ओपेरा के बाद से पूरी तरह से गलत उपयोग है क्योंकि वह DOM को भी पहचानता है) ।

— zaf

देखें stackoverflow.com/questions/1421584/...

— क्रीसेंट ताजा

Answer 1

यहाँ मैंने क्या पकाया है। यह बहुत आसान है, लेकिन यह काम करता है:

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

उपयोग:

eventFire(document.getElementById('mytest1'), 'click');

Comments

@ एंडरसन ग्रीन: मैंने इस jsfiddle के लिए एक उदाहरण जोड़ा है: jsfiddle.net/KooiInc/W4BHD

— KooiInc

सबूत है कि यह काम करता है (क्रोमियम में): +1 विथ document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)

— पॉइंटएडर्स

वैसे मैंने वोट अप बटन पर आपकी जावा-स्क्रिप्ट की कोशिश की :) (काम किया-कोर्स)

— 0fnt

सटीक उपयोगकर्ता व्यवहार अनुकरण के लिए, आपको लपेट चाहिए dispatchEventया clickके साथ आमंत्रण setTimeout, के रूप में यह प्रतीत होता है कि dispatchEventहै तुल्यकालिक ।

— लेव कज़कोव

Event.initEventअब deprecated developer.mozilla.org/en/docs/Web/API/Event/initEvent

— Artnikpro

Answer 2

कुछ सरल के बारे में क्या:

document.getElementById('elementID').click();

IE द्वारा समर्थित भी।

Comments

@HermannIngjaldsson हां यह IE में पूरी तरह से काम करता है - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx

— डैरेन स्वीनी

सवाल था "क्या यह भी काम करता है?" - इसका उत्तर हां है - AFAIK कम से कम 8 तक, 7 की जाँच नहीं की गई है

— डैरेन स्वीनी

क्या यह पहले मौजूद नहीं था? 2010 के उत्तर में इस सरल समाधान का उल्लेख क्यों नहीं किया गया? बस जिज्ञासु ...

— पार्थ

@ Nino butkopac वर्तमान में डेस्कटॉप के लिए बहुत अच्छा काम करता है लेकिन मोबाइल ब्राउज़रों के साथ काम करने की कोई गारंटी नहीं है। यहां तक ​​कि मोज़िला डेवलपर साइट मोबाइल समर्थन नहीं दिखाती है।

— le0diaz

@ पर्थ शायद यह किया है, यह सिर्फ उनके लिए क्लिक नहीं किया ।

— एंड्रयू

Answer 3

क्या आपने सभी ब्राउज़र पहचान से बचने के लिए jQuery का उपयोग करने पर विचार किया है? JQuery के साथ, यह उतना ही सरल होगा:

$("#mytest1").click();

Comments

यह केवल फायर jQuery इवेंट हैंडलर है, न कि डिफ़ॉल्ट व्यवहार (ब्राउज़र उस मामले में href हो जाता है)

— Romuald Brunet

मुझे दुःख के बारे में नहीं पता, लेकिन यह सुनिश्चित करना सुविधाजनक हो सकता है कि एक ही ब्राउज़र डिटेक्शन रूटीन को बार-बार रीकोड करते रहना न पड़े।

— ब्रैडब्रेनिंग

@ErikAigner: मैं भी यही सोच रहा था, लेकिन खुशी है कि इस मामले में स्वीकृत जवाब सादे जावास्क्रिप्ट और jQuery नहीं है। देखा कि बहुत बार एसओ पर। एक बार और: jQuery जावास्क्रिप्ट है, लेकिन जावास्क्रिप्ट jQuery नहीं है। हालांकि मुझे jQuery का उपयोग करना पसंद है, मैं अधिक से अधिक देख रहा हूं कि देव वास्तविक सादी चीज को नहीं समझते हैं। मेरे 2 सेंट, टिप्पणी का विरोध नहीं कर सके। ;)

— सैंडर

बहुत से मनुष्य ऐसे भी होते हैं जिन्हें पता नहीं होता कि कहां से शुरू करना है अगर वे अपने कपड़े धोना चाहते हैं, क्योंकि अधिकांश घरों में एक वॉशर का मालिक है, और लगभग सभी के पास एक कपड़े ड्रायर है। jQuery, आधुनिक उपकरणों की तरह, एक पुराने काम को बहुत आसान और कम त्रुटि वाला बना दिया है। यह सभी के लिए समाधान नहीं है, हालांकि, एक उत्तर को डाउनवोट करना जो क्रॉस-ब्राउज़र संगत होने के दौरान अधिक संक्षिप्त, समझने योग्य वाक्यविन्यास का उपयोग करके सटीक रूप से प्रश्न का उत्तर देता है। +1।

— FreeAsInBeer

@FreeAsInBeer तब आप भी कहीं भी नहीं चलना चाहिए क्योंकि ड्राइविंग इतना आसान है। लेकिन हम जानते हैं कि यह मूर्खतापूर्ण है। यदि आप दूर जाने की जरूरत नहीं है तो आप चलते हैं। यदि आपको कुछ सरल करने की आवश्यकता है तो आप सादे जावास्क्रिप्ट का उपयोग करते हैं और इसे करने के लिए पूरी लाइब्रेरी लोड नहीं करना चाहते हैं। कुछ सरल करने के लिए गैस / बैंडविदट को बर्बाद करने की आवश्यकता नहीं है।

— जैकब अल्वारेज़

Answer 4

var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

संदर्भ

• https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
• https://codepen.io/felquis/pen/damDA

Comments

मेरा मानना ​​है कि यह आजकल का सबसे अच्छा जवाब होना चाहिए

— डेविडटुबमैन

Answer 5

आप jQuery का उपयोग करके अपने आप को अंतरिक्ष का एक गुच्छा बचा सकते हैं। आपको केवल उपयोग करने की आवश्यकता है:

$('#myElement').trigger("click")

Comments

ओपी ने जावास्क्रिप्ट मांगा। हालांकि यह कॉम्पैक्ट और कार्यात्मक है, लेकिन कुछ लोग jQuery जैसी चीजों पर नो-लाइब्रेरी जेएस को पसंद करते हैं।

— शव

Jquery डाउनलोड करके अंतरिक्ष को बचाएं?

— एमएच

कुछ लोग असेंबली पसंद करते हैं।

— डैन निसेनबूम

@ मुझे लगता है कि एक अधिक मान्य तर्क "इसे सरल रखने के लिए" होगा। SO में यहाँ आपकी डिफ़ॉल्ट प्रोफ़ाइल jQuery के समान आकार के बारे में है।

— adelriosantiago

Answer 6

शीर्ष उत्तर सबसे अच्छा है! हालाँकि, यह फ़ायरफ़ॉक्स में मेरे लिए माउस इवेंट को ट्रिगर नहीं कर रहा था etype = 'click'।

तो, मैं बदल document.createEventकरने के लिए 'MouseEvents'और कहा कि समस्या तय। अतिरिक्त कोड यह जांचने के लिए है कि क्या कोई अन्य कोड घटना में हस्तक्षेप कर रहा था या नहीं, और यदि इसे रद्द कर दिया गया तो मैं उसे सांत्वना देने के लिए लॉग इन करूंगा।

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

Answer 7

document.getElementById('elementId').dispatchEvent(new MouseEvent("click",{bubbles: true, cancellable: true}));

उसी के लिए जावास्क्रिप्ट और ब्राउज़र संगतता का उपयोग करके माउस घटनाओं के बारे में जानने के लिए इस लिंक का पालन करें

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#Browser_compatibility