मैं एक जावास्क्रिप्ट ईवेंट क्लिक को कैसे ट्रिगर कर सकता हूं


215

मेरे पेज में हाइपरलिंक है। मैं परीक्षण प्रयोजनों के लिए हाइपरलिंक पर कई क्लिकों को स्वचालित करने की कोशिश कर रहा हूं। क्या कोई तरीका है जिससे आप जावास्क्रिप्ट का उपयोग करके हाइपरलिंक पर 50 क्लिकों का अनुकरण कर सकते हैं?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

मैं जावास्क्रिप्ट से onClick इवेंट ट्रिगर की तलाश कर रहा हूँ।

जवाबों:


285

HTML एलिमेंट पर सिंगल क्लिक करना : बस करो element.click()अधिकांश प्रमुख ब्राउज़र इसका समर्थन करते हैं


क्लिक को एक से अधिक बार दोहराने के लिए: विशिष्ट रूप से इसे चुनने के लिए तत्व में एक आईडी जोड़ें:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

और .click()लूप के माध्यम से अपने जावास्क्रिप्ट कोड में विधि को कॉल करें :

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();

1
एनबी यह त्वरित परीक्षण उद्देश्य के लिए है। अधिक मजबूत, मानक-अनुपालन, क्रॉस-ब्राउज़र समाधान के लिए, जुआन का जवाब देखें।
उदाहरण

3
मुझे समझ नहीं आ रहा है कि यह मोबाइल पर काम नहीं करता है।
im_benton

@im_benton: लूप ओपी की विशिष्ट जरूरतों के लिए था। यदि आपको केवल एक क्लिक ईवेंट को ट्रिगर करने की आवश्यकता है, तो आप उस रेखा को छोड़ सकते हैं जो इसके साथ शुरू होती है for(
रिनोगो

87

अपडेट करें

यह एक पुराना उत्तर था। आजकल आपको बस क्लिक का उपयोग करना चाहिए । और अधिक उन्नत घटना फायरिंग के लिए, का उपयोग dispatchEvent

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

मूल उत्तर

यहाँ मेरा उपयोग है: http://jsfiddle.net/mendesjuan/rHMCy/4/

IE9 + के साथ काम करने के लिए अद्यतन किया गया

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

ध्यान दें कि कॉलिंग का fireEvent(inputField, 'change');मतलब यह नहीं है कि यह वास्तव में इनपुट फ़ील्ड को बदल देगा। परिवर्तन ईवेंट को फायर करने के लिए विशिष्ट उपयोग मामला तब होता है जब आप किसी प्रोग्राम को प्रोग्रामेटिक रूप से सेट करते हैं और आप चाहते हैं कि ईवेंट हैंडलर्स को कॉल किया जाए क्योंकि कॉलिंग input.value="Something"एक ईवेंट को ट्रिगर नहीं करेगा।


हे जुआन! आपका उदाहरण JSUtil.NodeTypes.DOCUMENT_NODE को परिभाषित नहीं करता है
काटो

मुझे पता है कि सवाल घटनाओं पर क्लिक करने के बारे में है, लेकिन आपने यहां कुछ सामान्य कोड प्रदान किए हैं और जो मैं देख सकता हूं कि परिवर्तन की घटनाओं को निकाल नहीं दिया जाएगा (मैंने इसका परीक्षण किया और यह वास्तव में ऐसे आयोजनों के लिए काम नहीं करता है)। परिवर्तन की घटनाओं को ट्रिगर करने के लिए मुझे jquery ट्रिगर फ़ंक्शन का उपयोग करना पड़ा।
अलेक्जेंडर लेच

@AleksanderLech किसी घटना को फायर करने की गारंटी नहीं है कि कार्रवाई होगी। यह क्लिक के लिए करता है, यह परिवर्तन के लिए नहीं है। उन घटनाओं के लिए उपयोग का मामला जहां परिवर्तन काम नहीं करता है, जब आप इसके मूल्य में बदलाव करना चाहते हैं, लेकिन आप चाहते हैं कि सभी परिवर्तन इवेंट हैंडलर को बुलाया जाए (चाहे वे इसके साथ सेट किए गए हों jQueryया नहीं)। यदि आप सटीक कोड के साथ एक नया प्रश्न पूछते हैं तो मैं अधिक सार्थक सहायता प्रदान कर सकता हूं लेकिन आप काम नहीं कर रहे थे।
जुआन मेंड्स

शीघ्र प्रतिक्रिया के लिए शुक्रिया। मैं आपके स्निपेट में कुछ संशोधनों के बाद परिवर्तन की घटना को चलाने में सक्षम था: 1) var नोड = document.getElementById (originalEvent.srcElement.id); 2) event.initEvent (eventName, true, true); // मुझे पता नहीं है कि आपने बदलाव की घटनाओं के लिए बबलिंग को क्यों निष्क्रिय कर दिया है। कृपया मुझे बताओ आपको क्या लगता है।
अलेक्जेंडर लेच

40

क्या

 l.onclick();

क्या वास्तव में, यदि आप के साथ एक सेट है, के onclickकार्य को बुला रहा है । यदि आपने सेट नहीं किया है , तो यह कुछ भी नहीं करता है। इसके विपरीत, ll.onclick = myFunction;l.onclick

 l.click();

क्लिक पर अनुकरण करता है और सभी ईवेंट हैंडलर को निकालता है, चाहे वह l.addEventHandler('click', myFunction);HTML में, या किसी अन्य तरीके से जोड़ा गया हो ।


1
FWIW यह केवल एक तत्व स्तर पर काम करता है। यदि आप windowऑब्जेक्ट पर एक क्लिक ईवेंट जोड़ते हैं , तो यह किसी window.clickफ़ंक्शन को जादुई रूप से उजागर नहीं करेगा ।
जेम्स डोनेली

20

मुझे काफी शर्म आ रही है कि बहुत सारे गलत या अघोषित आंशिक प्रयोज्यता हैं।

ऐसा करने का सबसे आसान तरीका क्रोम या ओपेरा (मेरे उदाहरण क्रोम का उपयोग करेगा) कंसोल के माध्यम से है। कंसोल में निम्न कोड दर्ज करें (आम तौर पर 1 पंक्ति में):

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

यह आवश्यक परिणाम उत्पन्न करेगा


12

.click()एंड्रॉइड के साथ काम नहीं करता है ( मोबाइल अनुभाग में मोज़िला डॉक्स देखें )। आप इस विधि से क्लिक इवेंट को ट्रिगर कर सकते हैं:

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

से इस पोस्ट


1
मैं jQuery के ट्रिगर क्लिक की कोशिश कर रहा था, लेकिन पाया कि यह DOM पर वास्तविक ईवेंट भेजने के बजाय कॉलबैक को समाप्त करता है। @manolo आपकी विधि सही है।
अक्षय गुंडेवार

" .click()एंड्रॉइड के साथ काम नहीं करता है" वास्तव में, नवीनतम तालिका "संगतता अज्ञात" कहती है।
गौरांग टंडन

8

परीक्षण ढांचे का उपयोग करें

यह मददगार हो सकता है - http://seleniumhq.org/ - सेलेनियम एक वेब अनुप्रयोग स्वचालित परीक्षण प्रणाली है।

आप फ़ायरफ़ॉक्स प्लगइन सेलेनियम आईडीई का उपयोग करके परीक्षण बना सकते हैं

घटनाओं की मैनुअल फायरिंग

घटनाओं को मैन्युअल रूप से फायर करने के लिए आपको अलग-अलग ब्राउज़रों के लिए अलग-अलग तरीकों का उपयोग करना होगा - या तो el.dispatchEventया el.fireEventजहाँel आपका एंकर तत्व होगा। मेरा मानना ​​है कि इन दोनों को पास होने के लिए ईवेंट ऑब्जेक्ट बनाने की आवश्यकता होगी।

विकल्प, पूरी तरह से सही नहीं, त्वरित और गंदा तरीका यह होगा:

var el = document.getElementById('anchorelementid');
el.onclick(); // Not entirely correct because your event handler will be called
              // without an Event object parameter.


1

निष्पक्ष चेतावनी:

element.onclick()अपेक्षा के अनुरूप व्यवहार नहीं करता है। यह केवल कोड चलाता है onclick="" attribute, लेकिन डिफ़ॉल्ट व्यवहार को ट्रिगर नहीं करता है।

मेरे पास ऐसा ही मुद्दा था जब रेडियो बटन चेक करने के लिए सेट नहीं था, भले ही onclickकस्टम फ़ंक्शन ठीक चल रहा था। radio.checked = "true";इसे सेट करने के लिए जोड़ना था । संभवतः वही जाता है और अन्य तत्वों के लिए (इसके बाद a.onclick()भी होना चाहिए window.location.href = "url";)


वास्तव में, उपयोग करने onclick()का अर्थ होगा कि eventवस्तु ब्राउज़र द्वारा स्वचालित रूप से परिभाषित नहीं होगी, इसलिए सामान्य तरीके event.stopPropagation()भी अपरिभाषित होंगे।
बोआज

0

कृपया ट्रिगर फ़ंक्शन को कॉल करें जहां कोई भी बटन और क्लिक करेगा।


<a href="#" id="myBtn" title="" >Button click </a>

function trigger(){
    document.getElementById("myBtn").click();
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.