Comment puis-je simuler des clics de souris en JavaScript avec des options personnalisables ?

Simulation des clics de souris avec JavaScript : un guide complet

Pour simuler un événement de clic de souris à l'aide de JavaScript, une méthode courante est document.form. bouton.clic(). Cette méthode vous permet de déclencher directement un comportement de clic sur un bouton de formulaire.

Cependant, si vous souhaitez simuler plus précisément l'événement onclick, vous pouvez utiliser le code fourni dans votre requête :

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

Ce code crée un nouvel événement de souris, initialise ses propriétés, puis le distribue sur l'élément spécifié.

Événement personnalisable Simulation

Pour plus de flexibilité, pensez à utiliser la fonction suivante :

function simulate(element, eventName, options)
{
    // Set default options
    var defaultOptions = {
        pointerX: 0,
        pointerY: 0,
        button: 0,
        ctrlKey: false,
        altKey: false,
        shiftKey: false,
        metaKey: false,
        bubbles: true,
        cancelable: true
    };

    // Extend default options with provided options
    for (var property in options)
      defaultOptions[property] = options[property];

    // Determine event type
    var eventType = null;
    for (var name in eventMatchers)
    {
        if (eventMatchers[name].test(eventName)) { 
            eventType = name; 
            break; 
        }
    }

    // Create and initialize event
    var oEvent;
    if (document.createEvent)
    {
        if (eventType == 'HTMLEvents')
        {
            oEvent = document.createEvent(eventType);
            oEvent.initEvent(eventName, defaultOptions.bubbles, defaultOptions.cancelable);
        }
        else
        {
            oEvent = document.createEvent(eventType);
            oEvent.initMouseEvent(eventName, defaultOptions.bubbles, defaultOptions.cancelable, document.defaultView,
            defaultOptions.button, defaultOptions.pointerX, defaultOptions.pointerY, defaultOptions.pointerX, defaultOptions.pointerY,
            defaultOptions.ctrlKey, defaultOptions.altKey, defaultOptions.shiftKey, defaultOptions.metaKey, defaultOptions.button, element);
        }
        element.dispatchEvent(oEvent);
    }
    else
    {
        // Legacy IE fallback
        defaultOptions.clientX = defaultOptions.pointerX;
        defaultOptions.clientY = defaultOptions.pointerY;
        oEvent = document.createEventObject();
        oEvent = extend(oEvent, defaultOptions);
        element.fireEvent('on' + eventName, oEvent);
    }

    return element;
}

Cette fonction vous permet de spécifier des options personnalisées pour l'événement simulé, y compris les coordonnées de la souris, le bouton enfoncé et touches de modification.

Utilisation

Pour utiliser la fonction, fournissez simplement l'élément cible, le nom de l'événement et toutes les options souhaitées :

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

Cela simulera un événement de clic sur l'élément "btn", avec des coordonnées de souris personnalisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!