How to set target property when simulating mouseclick in javascript?

Question

I want to simulate a mouseclick in my javascript code which uses dojo. The action for a real mouseclick will be registered using dojo-stuff with "ondijitclick".

I know which method/function gets called and I also have the dijit object to call this method. The method expects an function object as parameter, so I'm creating a new MouseEvent object. This all works fine, except that I need to set the target value of this event and I can't figure out how to do this. This is needed because later exception handling is accessing the target-property and I can't avoid this.

So far the code I have:

    dojo.query(".mybutton").forEach(function (node) {
        var target = dojo.query(".myclass").parents("#" + node.id)[0];
        var event = new MouseEvent('click', {
            'view' : window,
            'bubbles': true,
            'cancelable': true
        });
        dijit.byId(node.id)._doEvent(event);
    });

If I add the following line

            'target' : target,

in the MouseEvent creation, the property will not be set (but all other properties will be) and the target-property will be null, but target itself is not null).

Is it even possible to set the target property somehow? If it is possible I'm wondering what I am doing wrong?

Edit:

I have found an very dirty solution, which includes a minimal but undesired change in the widget coming from the underlying framework.

I could only achieve that the relatedTarget property is set while target still will be null. If checking the target property for null and if it is null taking the relatedTarget in the widgets method everything works as wished. The simulated click and the real click are both working properly.

The only problem with this solution is that I hasve to modify the widget in the framework. This is something what we won't do in a release-build. This is a possible solution in general, but in reality this solution is not acceptable for us.

So there is still the question how I can set the target property with the right value. As the solution shows in genereal it works all except setting the target property.

I can't see that this is achieved in the solution presented by Ferry Kranenburg. If this solution does what I need it would be nice if someone could explain the trick to me.

Answer 1

The target property of the event object can not be accessed when the event is initialized. It points to the first element that receives the event once it is triggered and is set internally by JavaScript to that element. So if you need a special element being the event target you have to dispatch the event to that element.

One way would be to overwrite the native target property with your own method, but this may affect the bubbling behavior of the event.

dojo.query(".mybutton").forEach(function (node) {
  var target = dojo.query(".myclass").parents("#" + node.id)[0];
  var event = new MouseEvent('click', {
    'view' : window,
    'bubbles': true,
    'cancelable': true
  });
  Object.defineProperty(event, 'target', {value: target, enumerable: true});
  dijit.byId(node.id)._doEvent(event);
});

Answer 2

You will need to create an event first. See here how to simulate a mouse event.