কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি মাউস ক্লিক অনুকরণ করতে?

Question

আমি document.form.button.click()পদ্ধতি সম্পর্কে জানি । তবে, আমি কীভাবে onclickইভেন্টটি অনুকরণ করতে পারি তা জানতে চাই like

আমি স্ট্যাক ওভারফ্লোতে কোথাও এই কোডটি পেয়েছি তবে এটি কীভাবে ব্যবহার করতে হয় তা আমি জানি না :(

function contextMenuClick()
{
    var element= 'button'

    var evt = element.ownerDocument.createEvent('MouseEvents');

    evt.initMouseEvent('contextmenu', true, true,
         element.ownerDocument.defaultView, 1, 0, 0, 0, 0, false,
         false, false, false, 1, null);

    element.dispatchEvent(evt);
}

আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি মাউস ক্লিক ইভেন্ট ফায়ার করব?

Comments

আপনি এটি করে কী অর্জন করার চেষ্টা করছেন?

— এরিক ২

@ নোক ইমচেন - আপনি কোডটি পেয়েছেন এমন মূল প্রশ্নটির একটি লিঙ্ক সরবরাহ করতে পারেন?

— জ্যারেড ফারিশ ২

@ এরিক, নীচে দেওয়া লিঙ্কটির মতোই

— নোক ইমচেন ২:4

@jared, এখানে লিঙ্ক stackoverflow.com/questions/433919/...

— Nok Imchen

Answer 1

(প্রোটোটাইপ.জেএসবিহীন এটিকে কাজ করার জন্য পরিবর্তিত সংস্করণ)

function simulate(element, eventName)
{
    var options = extend(defaultOptions, arguments[2] || {});
    var oEvent, eventType = null;

    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { eventType = name; break; }
    }

    if (!eventType)
        throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');

    if (document.createEvent)
    {
        oEvent = document.createEvent(eventType);
        if (eventType == 'HTMLEvents')
        {
            oEvent.initEvent(eventName, options.bubbles, options.cancelable);
        }
        else
        {
            oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
            options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
            options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        options.clientX = options.pointerX;
        options.clientY = options.pointerY;
        var evt = document.createEventObject();
        oEvent = extend(evt, options);
        element.fireEvent('on' + eventName, oEvent);
    }
    return element;
}

function extend(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;
}

var eventMatchers = {
    'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
    'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
    pointerX: 0,
    pointerY: 0,
    button: 0,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    bubbles: true,
    cancelable: true
}

আপনি এটি এর মতো ব্যবহার করতে পারেন:

simulate(document.getElementById("btn"), "click");

নোট করুন যে তৃতীয় প্যারামিটার হিসাবে আপনি 'বিকল্পগুলি' এ পাস করতে পারেন। আপনি যে বিকল্পগুলি নির্দিষ্ট করবেন না সেগুলি ডিফল্ট বিভাগগুলি থেকে নেওয়া হয় (স্ক্রিপ্টের নীচে দেখুন)। সুতরাং আপনি উদাহরণস্বরূপ যদি মাউস স্থানাঙ্ক নির্দিষ্ট করতে চান তবে আপনি এর মতো কিছু করতে পারেন:

simulate(document.getElementById("btn"), "click", { pointerX: 123, pointerY: 321 })

অন্যান্য ডিফল্ট বিকল্পগুলিকে ওভাররাইড করতে আপনি অনুরূপ পদ্ধতির ব্যবহার করতে পারেন।

ক্রেডিটগুলি কঙ্গাক্সে যেতে হবে । এখানে আসল উত্স (প্রোটোটাইপ.জেএস নির্দিষ্ট)।

Comments

আমার উত্তর হিসাবে উল্লিখিত হিসাবে ক্রেডিটগুলি কঙ্গাক্সে যাওয়া উচিত। আমি এটি লাইব্রেরিটি

— অজ্ঞেয়াদি

এই স্ক্রিপ্টে মাউস স্থানাঙ্কগুলি কীভাবে পাস করবেন?

— দিমিত্রি

আমি পোস্টটি সম্পাদনা করব এবং মাউস স্থানাঙ্কগুলিতে আপনি কীভাবে পাস করতে পারেন তার একটি উদাহরণ যুক্ত করব ..

— টুইজেড

আপনার প্রকল্পগুলিতে এখানে সহজে অন্তর্ভুক্তির জন্য আমি এটি একটি কফি স্ক্রিপ্ট

— জোছা

এটি কীভাবে $ (এল) থেকে পৃথক c ক্লিক করুন (), আপনার সমাধান যেমন আমার পক্ষে কাজ করে, jquery বিকল্পটি করে না

— সিলভার রিঙ্গভ

Answer 2

এখানে একটি খাঁটি জাভাস্ক্রিপ্ট ফাংশন যা লক্ষ্য উপাদানটিতে ক্লিক (বা কোনও মাউস ইভেন্ট) সিমুলেট করবে:

function simulatedClick(target, options) {

  var event = target.ownerDocument.createEvent('MouseEvents'),
      options = options || {},
      opts = { // These are the default values, set up for un-modified left clicks
        type: 'click',
        canBubble: true,
        cancelable: true,
        view: target.ownerDocument.defaultView,
        detail: 1,
        screenX: 0, //The coordinates within the entire page
        screenY: 0,
        clientX: 0, //The coordinates within the viewport
        clientY: 0,
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false, //I *think* 'meta' is 'Cmd/Apple' on Mac, and 'Windows key' on Win. Not sure, though!
        button: 0, //0 = left, 1 = middle, 2 = right
        relatedTarget: null,
      };

  //Merge the options with the defaults
  for (var key in options) {
    if (options.hasOwnProperty(key)) {
      opts[key] = options[key];
    }
  }

  //Pass in the options
  event.initMouseEvent(
      opts.type,
      opts.canBubble,
      opts.cancelable,
      opts.view,
      opts.detail,
      opts.screenX,
      opts.screenY,
      opts.clientX,
      opts.clientY,
      opts.ctrlKey,
      opts.altKey,
      opts.shiftKey,
      opts.metaKey,
      opts.button,
      opts.relatedTarget
  );

  //Fire the event
  target.dispatchEvent(event);
}

এখানে একটি কার্যকারী উদাহরণ: http://www.spookandpuff.com/example/clickSimulation.html

আপনি ডম- এর যে কোনও উপাদানকে ক্লিক করতে পারেন । কিছু simulatedClick(document.getElementById('yourButtonId'))কাজ করবে।

আপনি একটি বস্তু মধ্যে পাস মধ্যে করতে optionsঅক্ষমতা (অনুকরণ ওভাররাইড করতে যা মাউস বাটন যদি আপনি চান কিনা, Shift/ Alt/ Ctrlইত্যাদি অপশন এটা উপর ভিত্তি করে গ্রহণ করে, অনুষ্ঠিত হয় MouseEvents এপিআই ।

আমি ফায়ারফক্স, সাফারি এবং ক্রোমে পরীক্ষা করেছি। ইন্টারনেট এক্সপ্লোরার বিশেষ চিকিত্সা প্রয়োজন হতে পারে, আমি নিশ্চিত না।

Comments

এটি ক্রোমে আমার পক্ষে দুর্দান্ত কাজ করেছে, যেখানে উপাদানগুলির ক্লিক () ইভেন্ট রয়েছে বলে মনে হয় না।

— হাওয়ার্ড এম লুইস শিপ 21

এই মহান হয় - ছাড়া type: options.click || 'click'সম্ভবত হওয়া উচিত type: options.type || 'click'।

— এলিয়ট উইঙ্কলার

এই সমাধানটিতে সমস্যাটি হ'ল এটি ধারণিত উপাদানগুলিকে ক্লিক করবে না। যেমন। <div id = "outer"><div id = "inner"></div></div> simulatedClick(document.getElementById('outer'));অভ্যন্তরীণ উপাদান ক্লিক করবে না।

— dwjohnston

ঘটনা বুদবুদ কীভাবে কাজ করে তা তা নয়, যদিও - আপনি যদি কোনও বাইরের উপাদানকে ক্লিক করেন তবে পূর্বপুরুষরা ক্লিক ইভেন্টটি বুদবুদ হওয়ার সাথে সাথে গ্রহণ করে, তবে এর বাচ্চারা তা করে না। আপনার বাহ্যায় divএকটি বোতাম বা লিঙ্ক রয়েছে কিনা তা কল্পনা করুন - আপনি অভ্যন্তরের উপাদানটির উপর ক্লিক ক্লিক করতে বাহিরের উপর ক্লিক করতে চান না।

— বেন হুল

||অপারেটরটিকে এ জাতীয় মামলার জন্য ব্যবহার করবেন না , কারণ ওফস, canBubble:options.canBubble || true,সর্বদা এখনই সত্যের মূল্যায়ন করে এবং সম্ভবত 5 বছর কেউ এটিকে লক্ষ্য করবে না।

— উইনচেস্টরো

Answer 3

একটি মাউস ক্লিক অনুকরণ করার একটি সহজ এবং আরও মানসম্পন্ন উপায় হ'ল ইভেন্ট ইভেন্ট তৈরি করতে এবং প্রেরণে সরাসরি ইভেন্ট কনস্ট্রাক্টর ব্যবহার করে ।

MouseEvent.initMouseEvent()পদ্ধতিটি পশ্চাদপদ সামঞ্জস্যের জন্য রাখা হলেও , মাউসএভেন্ট অবজেক্ট তৈরির বিষয়টি MouseEvent()নির্মাণকারীর সাহায্যে করা উচিত ।

var evt = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: 20,
    /* whatever properties you want to give it */
});
targetElement.dispatchEvent(evt);

ডেমো: http://jsfiddle.net/DerekL/932wyok6/

এটি সমস্ত আধুনিক ব্রাউজারে কাজ করে। আইই সহ পুরানো ব্রাউজারগুলির জন্য, MouseEvent.initMouseEventএটি হ্রাস করা হলেও দুর্ভাগ্যক্রমে ব্যবহার করতে হবে।

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", canBubble, cancelable, view,
                   detail, screenX, screenY, clientX, clientY,
                   ctrlKey, altKey, shiftKey, metaKey,
                   button, relatedTarget);
targetElement.dispatchEvent(evt);

Comments

এটি ব্যর্থ হয়ে গেছে বলে মনে হচ্ছে যখন আমি ক্লিক করতে চাইছি এমন একটি উপাদানটিতে href = "জাভাস্ক্রিপ্ট: অকার্যকর (0)" রয়েছে এবং এটি অন্য ক্লিক হ্যান্ডলারকে সাড়া দেয় যা বস্তুর সাথে সংযুক্ত হয়ে গেছে।

— ডিজেবি

সাধারণ ইভেন্টগুলি পাওয়ার জন্য কি কোনও দ্রুত উপায় আছে? আমি লক্ষ্য করেছি যে আমি কোনও বোতামে সহজেই ক্লিক বাড়াতে পারি, তবে সেখানে কোনও আদর্শ "মাউসেন্টার", "মাউসলেভ" প্রমাণ নেই যে আমি উপরের মতো একটি নতুন মাউসেন্ট তৈরি করার পরিবর্তে কেবল রেফারেন্স করতে পারি?

— জেমস জোশুয়া স্ট্রিট

Answer 4

মজিলা বিকাশকারী নেটওয়ার্ক (এমডিএন) ডকুমেন্টেশন থেকে, আপনি যা খুঁজছেন তা এইচটিএমইলেমেন্ট.ক্লিক () । আপনি এখানে আরও ঘটনা জানতে পারেন ।

Comments

@ এরকসেন এমডিএন পৃষ্ঠা যেমন বলেছে, এটি কেবল তখনই উপাদানগুলির ক্লিক ইভেন্টগুলিকে জ্বালিয়ে দেয় যখন এটি সমর্থনকারী উপাদানগুলির সাথে ব্যবহৃত হয় (যেমন <ইনপুট> ধরণের একটি) types

— ক্রিস্টোফ

Answer 5

ডেরেকের উত্তরের ভিত্তিতে, আমি এটি যাচাই করেছি

document.getElementById('testTarget')
  .dispatchEvent(new MouseEvent('click', {shiftKey: true}))

কী মোডিফায়ারগুলির সাথেও প্রত্যাশার মতো কাজ করে। এবং এটি হতাশিত API নয়, যতদূর আমি দেখতে পাচ্ছি। আপনি এই পৃষ্ঠায় যাচাই করতে পারেন ।

Answer 6

আপনি উপাদানটি ব্যবহার করতে পারেন ফ্রম পয়েন্ট :

document.elementFromPoint(x, y);

সকল ব্রাউজারগুলিতে সমর্থিত: https://caniuse.com/#feat=element-from-Point

Answer 7

জাভাস্ক্রিপ্ট কোড

   //this function is used to fire click event
    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);
      }
    }

function showPdf(){
  eventFire(document.getElementById('picToClick'), 'click');
}

এইচটিএমএল কোড

<img id="picToClick" data-toggle="modal" data-target="#pdfModal" src="img/Adobe-icon.png" ng-hide="1===1">
  <button onclick="showPdf()">Click me</button>