使用dojo触发鼠标悬停事件？答案

【问题标题】：Trigger mouseover event using dojo?使用dojo触发鼠标悬停事件？
【发布时间】：2012-04-30 15:01:57
【问题描述】：

在 jquery 中，您可以使用 $(element).mouseover() 触发鼠标悬停事件。

在dojo中使用connect函数后，我不太确定如何触发事件。当我使用单击连接时，我可以使用 element.click() 来触发单击，但是对于鼠标悬停等其他事件，调用 element.mouseover() 不起作用。那么如何使用 Dojo 触发鼠标悬停等事件呢？（我知道有像 fireEvent 这样的普通 js 方法，但它很混乱，不能跨浏览器证明）

这里有一些代码

var myButton = dojo.byId("myButton"),
    myDiv = dojo.byId("myDiv");

dojo.connect(myButton, "mouseover", function(evt){
    dojo.style(myDiv, "backgroundColor", "blue");
});

dojo.connect(myButton, "click", function(evt){
    dojo.style(myDiv, "backgroundColor", "yellow");
});

myButton.click();//works

myButton.mouseover();//doesn't work

jsFiddle 上的代码：http://jsfiddle.net/mHKDt/28/

【问题讨论】：

标签： javascript dojo

【解决方案1】：

对于 dojo 1.7 示例应该这样做。您不需要样式表或 body 标记上的 claro 类。它们是我的便签本模板的一部分，我使用 try 的东西。

<html>
    <head>
            <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" media="screen">
            <!-- load dojo and provide config via data attribute -->
            <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
                    data-dojo-config="async: true"></script>
    </head>
    <script type="text/javascript">
    <!--
    require(["dojo/mouse",
             "dojo/dom",
             "dojo/on",
             "dojo/domReady!"],function(mouse,dom,on){
                    var node = dom.byId("myImg")
                    on(node,mouse.enter,function(){
                        console.info("In " + node.title);
                    });

                    on(node,mouse.leave,function(){
                        console.info("Out " + node.title);
                    });
    });         
    //-->
    </script>

    <body class="claro">
        <img id="myImg" title="yay google" src="http://www.google.com/ig/images/jfk/google_color.png"/>
    </body>
</html>

【讨论】：

我不是在寻找添加事件监听器的方法，我想在代码中触发鼠标悬停之类的事件。请阅读问题。

【解决方案2】：

如果你不介意使用纯 javascript，让我们看看这个帖子Simulate Mouse Over in Vimperator plugin

我发现这与 dojo 配合得很好。

Here is your jsFiddle that I have uppdated.

【讨论】：

谢谢，我已经找到了这个答案。我正在寻找一种在道场中做到这一点的方法。

【解决方案3】：

尝试发布订阅。

<script type="text/javascript">
<!--
require(["dojo",
        "dojo/topic",
         "dojo/mouse",
         "dojo/dom",
         "dojo/on",
         "dojo/domReady!"],function(dojo,topic,mouse,dom,on){
        var node = dojo.byId("myImg");
        topic.subscribe("mouseover",function(msg){
            console.info("Called");
            dojo.style("myDiv", "backgroundColor", msg);
        });

        on(node,mouse.enter,function(){
            topic.publish("mouseover","green");
        });

        on(node,mouse.leave,function(){
            topic.publish("mouseover","blue");
        });
        topic.publish("mouseover","black");
});         
//-->
</script>

【讨论】：