Comment puis-je simuler des clics de souris en JavaScript avec des options personnalisables ?-js tutoriel-php.cn

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

Barbara Streisand

Libérer： 2024-12-03 18:42:11

original

1067 Les gens l'ont consulté

How Can I Simulate Mouse Clicks in JavaScript with Customizable Options?

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!