जावास्क्रिप्ट का उपयोग करके माउस क्लिक का अनुकरण कैसे करें?

Question

मुझे document.form.button.click()विधि के बारे में पता है । हालाँकि, मैं यह जानना चाहूंगा कि कैसे अनुकरण करना हैonclick घटना ।

स्टैक ओवरफ्लो पर मुझे यह कोड कहीं और मिला, लेकिन मुझे नहीं पता कि इसका उपयोग कैसे करना है :(

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

ऐसा करके आप क्या हासिल करने की कोशिश कर रहे हैं?

— एरिक

@ नोके इमचेन - क्या आप उस मूल प्रश्न का लिंक प्रदान कर सकते हैं जो आपको कोड से मिला है?

— जारेड फेरीश

@ एरिक, नीचे दिए गए लिंक के समान है

— नोक इमचेन

@jared, यहाँ लिंक stackoverflow.com/questions/433919/…

— Nok

Answer 1

(प्रोटोटाइप के बिना काम करने के लिए संशोधित संस्करण। js)

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 })

आप अन्य डिफ़ॉल्ट विकल्पों को ओवरराइड करने के लिए एक समान दृष्टिकोण का उपयोग कर सकते हैं।

श्रेय कंगक्स को जाना चाहिए । यहाँ मूल स्रोत (प्रोटोटाइप .js विशिष्ट) है।

Comments

क्रेडिट को कंगैक्स जाना चाहिए, जैसा कि मेरे उत्तर में दिया गया है। मैंने इसे पुस्तकालय अज्ञेय बना दिया :)

— ट्वीज़ २

इस स्क्रिप्ट में माउस निर्देशांक कैसे पास करें?

— दिमित्री

मैं पोस्ट को संपादित करूँगा और आप माउस निर्देशांक में कैसे पास कर सकते हैं इसका एक उदाहरण जोड़ते हैं ..

— TweeZz

मैंने इसे आपकी परियोजनाओं में आसान समावेश के लिए एक कॉफ़ीस्क्रिप्ट मॉड्यूल में बदल दिया: github.com/joscha/eventr

— Joscha

यह $ (el) .click () से अलग कैसे है, जैसा कि आपके समाधान मेरे लिए काम करता है, 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/examples/clickSimulation.html

आप DOM में किसी भी तत्व पर एक क्लिक का अनुकरण कर सकते हैं । कुछ simulatedClick(document.getElementById('yourButtonId'))ऐसा काम करेगा।

आप optionsडिफॉल्ट्स को ओवरराइड करने के लिए एक ऑब्जेक्ट में पास कर सकते हैं (जिस माउस बटन को आप चाहते हैं, अनुकरण करने के लिए, Shift/ Alt/ Ctrlआयोजित किया गया है, आदि। यह स्वीकार करता है विकल्प माउसइवेंट्स एपीआई पर आधारित हैं ।

मैंने फ़ायरफ़ॉक्स, सफारी और क्रोम में परीक्षण किया है। इंटरनेट एक्सप्लोरर को विशेष उपचार की आवश्यकता हो सकती है, मुझे यकीन नहीं है।

Comments

यह मेरे लिए क्रोम पर बहुत अच्छा काम करता है, जहाँ तत्वों को क्लिक () घटना नहीं लगती है।

— हॉवर्ड एम। लुईस शिप

यह महान है - सिवाय 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 साल तक नोटिस नहीं करेगा।

— Winchestro

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/

यह सभी आधुनिक ब्राउज़रों पर काम करता है। IE सहित पुराने ब्राउज़रों के लिए, 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

मोज़िला डेवलपर नेटवर्क (MDN) प्रलेखन से, HTMLElement.click () वह है जो आप खोज रहे हैं। आप यहां और अधिक घटनाओं का पता लगा सकते हैं ।

Comments

@Ercksen जैसा कि MDN पृष्ठ कहता है, यह केवल तत्व के क्लिक ईवेंट को आग लगाता है जब इसका समर्थन करने वाले तत्वों के साथ प्रयोग किया जाता है (जैसे <इनपुट> प्रकारों में से एक)।

— क्रिस्टोफ

Answer 5

डेरेक के जवाब के आधार पर, मैंने यह सत्यापित किया

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

कुंजी संशोधक के साथ भी अपेक्षित रूप से काम करता है। और यह एक पदावनत एपीआई नहीं है, जहां तक ​​मैं देख सकता हूं। आप इस पृष्ठ पर भी सत्यापित कर सकते हैं ।

Answer 6

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

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');
}

HTML कोड

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