Simulating a Mousedown, Click, Mouseup Sequence in Tampermonkey

Simulating a mousedown, click, mouseup sequence in Tampermonkey?

Send mouse events. Like so:

//--- Get the first link that has "stackoverflow" in its URL.
var targetNode = document.querySelector ("a[href*='stackoverflow']");
if (targetNode) {
    //--- Simulate a natural mouse-click sequence.
    triggerMouseEvent (targetNode, "mouseover");
    triggerMouseEvent (targetNode, "mousedown");
    triggerMouseEvent (targetNode, "mouseup");
    triggerMouseEvent (targetNode, "click");
}
else
    console.log ("*** Target node not found!");

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

---

That works if the web page is statically loaded. If the web page is AJAX-driven, use a technique as in:

• "Normal" button-clicking approaches are not working in Greasemonkey script?
• Choosing and activating the right controls on an AJAX-driven site

---

Beware:
The question code has an error. You need to pass a class name to that function. Like so:

document.getElementsByClassName ("SomeClassName")[0].click();

Dragging JavaScript - external script

SOLVED:
By using the specified events i was able to use a few functions to simulate the drag:

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
}

This function is taken from another question which i can't find it right now.(sorry.)

here's how i used it:

function mouseDragStart(node){
    console.log("Starting drag...");
    //console.log(node.offsetTop);
    //console.log(node.offsetLeft);
    triggerMouseEvent(node,"mousedown")
}

function mouseDragEnd(node){
    console.log("Ending drag...");
    //console.log(node.offsetTop);
    //console.log(node.offsetLeft);
    simulate(node, "mousemove" , {pointerX: node.offsetLeft + 5 , pointerY: node.offsetTop + 5})
    simulate(node, "mouseup" , {pointerX:  node.offsetLeft + 5 , pointerY: node.offsetTop + 5})
}

I was able to simulate a mousedrag using those event that works only on elements.

How to simulate mousemove event with pageX and pageY

I've updated your example code to show how to create a mousemove event. Note that your code uses the deprecated document​.create​Event(), and you should consider replacing that with the newer MouseEvent, which I used in the part of the code I added.

const target = document.querySelector('.target');
document.querySelector('main')  .addEventListener('mousemove', (e) => {    if (e.clientY > 60) {      target.style.top = (e.clientY - 25) + 'px';    }      target.style.left = (e.clientX - 25) + 'px';   });
target.addEventListener('mousedown', () => {   console.log('mouse down');})
const butt = document.querySelector('.sim-move');butt.addEventListener('click', () => {
 let evt = new MouseEvent("mousemove", {    clientX: 150,    clientY: 5,    bubbles: true,    cancelable: true,    view: window  });    let canceled = !target.dispatchEvent(evt);  
});
const butt1 = document.querySelector('.sim-down');butt1.addEventListener('click', () => {    triggerMouseEvent(target, 'mousedown');});function triggerMouseEvent (node, eventType) {    var clickEvent = document.createEvent ('MouseEvents');    clickEvent.initEvent (eventType, true, true);    node.dispatchEvent (clickEvent);}

html, body, main {  height: 100%;  padding: 0;  margin: 0;}
body {  margin: 20px;  }
main {  display: block;  border: 1px solid #000;  height: calc(100% - 42px);}
div {  position: absolute;  top: 50%;  left: 50%;  width: 50px;  height: 50px;  background-color: green;}

<button class="sim-move">Simulate mousemove</button><button class="sim-down">Simulate mousedown</button><main>  <div class='target'></div></main>

Mousedown-mouseup creates divs exponentially

This is because for every mousedown event you're attaching a new mouseup listener,
you want to move that event binding out of the mousedown listener.

var num=0;
$('.draw')
    .mousedown(function(e){
        var newDiv = null;
        newDiv = $('<div>').addClass('rec').css({
            'top': e.pageY,
            'left': e.pageX
        }).appendTo(this);
    })
    .mouseup(function(){
        num++;
        $('.elems').append($('<p>').text('rec '+num));
    })
;

---

Related Topics