11

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.

Onsokumaru
  • 521
  • 1
  • 6
  • 15

2 Answers2

14

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);
});
Daniel Turcich
  • 1,764
  • 2
  • 26
  • 48
Martin Ernst
  • 3,199
  • 1
  • 12
  • 12
  • Overwriting the target property works perfectly and I can't notice any sideeffect at the moment. – Onsokumaru Nov 26 '14 at 15:07
  • @MartinErnst are you sure the `target` property should be `enumberable`? – kjb Aug 30 '17 at 03:33
  • @kjb - Depends on your intents. With enumerable it shines up in for-in-loops through events properties, otherwise not. – Martin Ernst Aug 18 '18 at 21:01
  • @kjb - And: if you want to change the target multiple times, you also has to define: writable: true – Martin Ernst Aug 18 '18 at 21:03
  • will this work with Event() object? var target = $('#selector'); var event = new Event('keydown'); Object.defineProperty(event, 'target', {value: target}); This is not setting target value for me. its still null – Benison Dec 10 '20 at 12:59
  • @Benison yes it will, the 'target' in {value: target} needs to be the target element you're trying to dynamically assign to the event. – pzelenovic Feb 13 '21 at 16:58
0

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

Community
  • 1
  • 1
Ferry Kranenburg
  • 2,625
  • 1
  • 17
  • 23
  • I don't know if that is what I want. I just want to create the Event-Arguments and pass them to the already existing function. I'm wondering why I can't set the target while I can set the other properties like `view`. With the mentioned approach I can't react on `ondijitclick` and `onclick` won't helpt since I can't modify the original object and `onclick` is not calling the function I need to call. – Onsokumaru Nov 25 '14 at 06:56