在javascript中模拟mouseclick时如何设置目标属性？ [英] How to set target property when simulating mouseclick in javascript?

问题描述

我想在我使用dojo的JavaScript代码中模拟一个mouseclick。一个真正的mouseclick的动作将使用dojo的东西与ondijitclick注册。

我知道哪个方法/函数被调用，我也有dijit对象来调用这个方法。该方法期望一个函数对象作为参数，因此我正在创建一个新的MouseEvent对象。这一切都很好，除了我需要设置这个事件的目标值，我不知道如何做到这一点。这是需要的，因为后来的异常处理正在访问目标属性，我无法避免这种情况。

到目前为止，我有代码：

  dojo.query（.mybutton）。forEach（function（node）{
 var target = dojo.query（。myclass） .parents（＃+ node.id）[0]; 
 var event = new MouseEvent（'click'，{
'view'：window，
'bubbles' 
'cancelable'：true 
}）; 
 dijit.byId（node.id）._ doEvent（event）; 
}）; 
  

如果我添加以下行

<$ p在$ MouseEvent创建中，$ p> 'target'：target，


属性将不被设置（但所有其他属性将被），并且目标属性将为null，但目标本身不为null）。

甚至可以设置目标属性不知何故？如果可能，我想知道我在做错什么？

编辑：

我发现一个非常脏的解决方案，其中包括从底层框架的小部件的最小但不期望的更改。

我只能实现 relatedTarget 属性设置为 target 仍将为空。如果检查目标属性为null，并且如果它是空的，则在窗口小部件方法中的所有内容都可以正常工作。模拟点击和真实点击都能正常工作。

此解决方案的唯一问题是我必须在框架中修改窗口小部件。这是我们在发布版本中不会做的事情。这是一般可能的解决方案，但实际上这个解决方案对我们来说是不能接受的。

所以还有一个问题我可以如何设置 target 属性具有正确的值。因为解决方案在genereal中显示，除了设置目标属性外，它都可以工作。

我看不到这个在弗赖克兰登堡提出的解决方案中实现。如果这个解决方案能够满足我的需要，那么如果有人可以向我解释这个伎俩，那将是很好的。

解决方案

当事件被创建时，事件对象不可写。它指向在触发事件时接收事件的第一个元素，并通过javascript内部设置该元素。因此，如果您需要一个特殊的元素作为事件目标，则必须将该事件发送到该元素。

一种方法是使用自己的方式覆盖本机目标属性，但这可能会影响事件的冒泡行为。尝试一下：

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

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.

解决方案

The target property of the event object is not writable when the event is created. It points to the first element that receives the event when 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 an own one, but that may affect the bubbling behaviour of the event. Try it out:

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

这篇关于在javascript中模拟mouseclick时如何设置目标属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！