আমি কীভাবে একটি জাভাস্ক্রিপ্ট ইভেন্ট ক্লিক ট্রিগার করতে পারি


215

আমার পৃষ্ঠায় আমার একটি হাইপারলিংক রয়েছে। আমি পরীক্ষার উদ্দেশ্যে হাইপারলিঙ্কে কয়েকটি ক্লিক স্বয়ংক্রিয় করার চেষ্টা করছি। জাভা স্ক্রিপ্ট ব্যবহার করে হাইপারলিঙ্কে 50 টি ক্লিক সিমুলেট করার কোনও উপায় আছে কি?

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

আমি জাভাস্ক্রিপ্ট থেকে অনক্লিক ইভেন্ট ট্রিগার খুঁজছি।

উত্তর:


285

এইচটিএমএল উপাদানটিতে একক ক্লিক সম্পাদন করা: সহজভাবে করুন 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

@ আইম_বেন্টন: লুপটি ওপির নির্দিষ্ট প্রয়োজনের জন্য ছিল। আপনার যদি কেবল একটি ক্লিক ইভেন্ট ট্রিগার করতে হয় তবে আপনি শুরু হওয়া লাইনটি বাদ দিতে পারেন for(
রিনোগো

87

হালনাগাদ

এটি একটি পুরানো উত্তর ছিল। আজকাল আপনার শুধু ক্লিক ব্যবহার করা উচিত । আরও উন্নত ইভেন্টের ফায়ারিংয়ের জন্য, প্রেরণকারী ব্যবহার করুন ।

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/

আইই 9 + এর সাথে কাজ করার জন্য আপডেট হয়েছে

/**
 * 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 সংজ্ঞায়িত না
Kato

আমি জানি যে প্রশ্নটি ইভেন্টগুলি ক্লিক করার বিষয়ে তবে আপনি এখানে কিছু জেনেরিক কোড সরবরাহ করেছেন এবং আমি যে পরিবর্তনগুলি দেখতে পাচ্ছি তা নিক্ষেপ করা হচ্ছে না (আমি এটি পরীক্ষা করেছি এবং এটি সত্যিই এই জাতীয় ইভেন্টের জন্য কাজ করে না)। পরিবর্তন ইভেন্টগুলি ট্রিগার করতে আমাকে jquery ট্রিগার ফাংশনটি ব্যবহার করতে হয়েছিল।
আলেকসান্দার লেচ

@ আলেকসান্দারলেক কেবল একটি ইভেন্ট চালানো এই ব্যবস্থাটি গ্রহণের নিশ্চয়তা দেয় না। এটি ক্লিকের জন্য করে, এটি পরিবর্তনের জন্য নয়। যে ইভেন্টগুলিতে পরিবর্তন কাজ করে না সেগুলির ব্যবহারের ক্ষেত্রে যখন আপনি এর মানটিতে পরিবর্তন আনতে চান তবে আপনি চান যে সমস্ত পরিবর্তিত ইভেন্ট হ্যান্ডলারকে ডেকে আনা হবে (সেগুলি সেট করা ছিল কি jQueryনা)। আপনি যে সঠিক কোডটি চেষ্টা করে যাচ্ছেন কিন্তু কাজ করছেন না তার সাথে যদি আপনি একটি নতুন প্রশ্ন জিজ্ঞাসা করেন তবে আমি আরও অর্থবহ সহায়তা দিতে পারি।
হুয়ান মেন্ডেস 17

দ্রুত সাড়া দেওয়ার জন্য ধন্যবাদ। আমি আপনার স্নিপেটে কিছু পরিবর্তন করার পরে পরিবর্তন ইভেন্টটি চালাতে সক্ষম হয়েছি: 1) var node = document.getElementById (originalEvent.srcElement.id); 2) ইভেন্ট.initEvent (ইভেন্ট নাম, সত্য, সত্য); // আপনি কেন পরিবর্তন ইভেন্টগুলির জন্য বুদবুদ অক্ষম করেছেন তা আমি জানি না। অনুগ্রহপূর্বক আমাকে বল তুমি কি চিন্তা করছ?
আলেকসান্দার লেচ

40

কি

 l.onclick();

ডানগুলি হ'ল onclickফাংশনটিকে কল করে l, এটি হল যদি আপনি একটি সেট করে রেখেছেন l.onclick = myFunction;। যদি আপনি সেট না l.onclickকরে থাকেন তবে এটি কিছুই করে না। বিপরীতে,

 l.click();

একটি ক্লিক সিমুলেট করে l.addEventHandler('click', myFunction);এবং এইচটিএমএলে বা অন্য কোনও উপায়ে যুক্ত করা হোক না কেন, সমস্ত ইভেন্ট হ্যান্ডলারকে আগুন দেয় ।


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 এ প্রকৃত ইভেন্ট প্রেরণের চেয়ে কলব্যাক কল করে শেষ হয়। @ মানোলো আপনার পদ্ধতিটি সঠিক।
অক্ষয় গুন্ডেওয়ার

" .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

ট্রিগার ফাংশনটি যেখানেই কল করুন এবং বোতামটি ক্লিক করবে Please


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

function trigger(){
    document.getElementById("myBtn").click();
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.