dispatchEvent“鼠标悬停”不起作用

Question

我有以下代码http://jsfiddle.net/yc7sj3pt/2/

document.getElementById('obj_one').addEventListener('mouseover', function(){
    var e = document.createEvent('HTMLEvents');
    e.initEvent('mouseover', true, false);

    document.getElementById('obj_two').dispatchEvent(e);
    console.log('hover');
}, false);

当我在mouseover 上#obj_one 时，我试图让#obj_two 对悬停做出反应（从而变为红色），但它不起作用。我做错了什么？

Answer 1

根据this answer，你不能：

由用户代理生成的事件，无论是作为用户交互的结果，还是作为对 DOM 更改的直接结果，都受到用户代理的信任，其权限是脚本通过DocumentEvent.createEvent("Event") 方法，使用 Event.initEvent() 方法修改，或通过 EventTarget.dispatchEvent() 方法调度。可信事件的 isTrusted 属性值为 true，而非可信事件的 isTrusted 属性值为 false。

大多数不受信任的事件不应触发默认操作，除了 click 或 DOMActivate 事件。

推荐的方法是在mouseover 和mouseout 事件上添加和删除一个类，我在这个jsfiddle 中已经完成了。