JavaScript kullanarak bir fare tıklamasını nasıl taklit edebilirim?

document.form.button.click()Metodu biliyorum . Ancak, onclicketkinliği nasıl simüle edeceğini bilmek istiyorum .

Bu kodu Stack Overflow üzerinde bir yerde buldum, ancak nasıl kullanılacağını bilmiyorum :(

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

JavaScript kullanarak bir fare tıklaması etkinliğini nasıl tetikleyebilirim?

(Prototype.js olmadan çalışmasını sağlamak için değiştirilmiş sürüm)

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
}

Bu şekilde kullanabilirsiniz:

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

Üçüncü bir parametre olarak "seçenekler" e geçebileceğinizi unutmayın. Belirtmediğiniz seçenekler defaultOptions'tan alınır (komut dosyasının altına bakın). Örneğin, fare koordinatlarını belirtmek isterseniz, şöyle bir şey yapabilirsiniz:

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

Diğer varsayılan seçenekleri geçersiz kılmak için benzer bir yaklaşım kullanabilirsiniz.

Krediler kangaca gitmelidir . İşte orijinal kaynak (prototype.js'ye özgü).

Hedef öğe üzerinde bir tıklamayı (veya herhangi bir fare etkinliğini) simüle edecek saf bir JavaScript işlevi:

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

Çalışan bir örnek: http://www.spookandpuff.com/examples/clickSimulation.html

Sen herhangi bir öğeye ait bir tıklama simüle edebilirsiniz DOM . Gibi bir simulatedClick(document.getElementById('yourButtonId'))şey işe yarardı .

İçine bir nesneye geçebilir optionsolsun, istediğiniz fare düğmesi simüle etmek (varsayılan geçersiz kılmak için Shift/ Alt/ Ctrlvb tutamaz, bu dayanmaktadır kabul seçenekleri MouseEvents API .

Firefox, Safari ve Chrome'da test ettim. Internet Explorer'ın özel bir tedaviye ihtiyacı olabilir, emin değilim.

Bir fare tıklamasını simüle etmenin daha kolay ve daha standart bir yolu, bir olay oluşturmak ve göndermek için doğrudan olay oluşturucuyu kullanmak olacaktır .

MouseEvent.initMouseEvent()Yöntem geriye dönük uyumluluk için korunmasına rağmen, MouseEvent nesnesinin oluşturulması MouseEvent()yapıcı kullanılarak yapılmalıdır .

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

Demo: http://jsfiddle.net/DerekL/932wyok6/

Bu, tüm modern tarayıcılarda çalışır. IE dahil olmak üzere eski tarayıcılar MouseEvent.initMouseEventiçin maalesef kullanımdan kaldırılmış olsa da kullanılmalıdır.

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

Mozilla Developer Network (MDN) belgelerinden, HTMLElement.click () aradığınız şeydir. Burada daha fazla etkinlik bulabilirsiniz .

Derek'in cevabına dayanarak,

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

tuş değiştiricilerle bile beklendiği gibi çalışır. Gördüğüm kadarıyla bu kullanımdan kaldırılmış bir API değil. Bu sayfada da doğrulama yapabilirsiniz .

ElementFromPoint'i kullanabilirsiniz :

document.elementFromPoint(x, y);

tüm tarayıcılarda desteklenir: https://caniuse.com/#feat=element-from-point

JavaScript Kodu

   //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 Kodu

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