使用 Syn.js 的事件侦听器未触发鼠标事件

Question

我正在尝试让 Syn.js 进行程序化鼠标移动，以便在我的应用程序规范中使用。

我需要跟踪和测试mouseenter 和mouseleave。制作了一个简单的规范，但无法使其工作，没有触发任何事件。

任何指向我可能遗漏的东西？或者如何让事件触发？

我的测试用例：

（jsFiddle：http://jsfiddle.net/g1wjkjw5/）

JS

document.getElementById('target').addEventListener('mouseenter', log);
document.getElementById('target').addEventListener('mouseleave', log);
var events = {};

function log(e) {
    console.log(e.type); // never fires... :/
    events[e.type] = true;
}

setTimeout(function () {
    syn.move({
        from: {clientX: 400, clientY: 400},
        to: {clientX: 50, clientY: 50},
        duration: 1000
    }, document.body);

    console.log('Syn fired');
}, 200);

setTimeout(function () {
    console.log(events); // this gets empty
}, 2000);

CSS

div#target {
    background: #ccf;
    border: 1px solid black;
}

HTML

<script src="https://rawgit.com/bitovi/syn/master/dist/syn.js"></script>
<div id="target" style="float: left; padding: 100px;"></div>

Answer 1

Mozilla probably won't let you

查看Syn.js源代码，你所追求的事件根本不是模拟的。

jQuery does what the others have suggested

请记住，鼠标进入/离开最初是 Internet Explorer 专有的，而 jQuery 模拟了它。它只是最近才变得无处不在。 12

这是一个jsfiddle using a modified Syn.js 来实现您的要求。

只需更改事件名称：

if (last !== el && el && last) {
    var options = syn.helpers.extend({}, point);
    options.relatedTarget = el;
    syn.trigger(last, 'mouseleave', options);
    options.relatedTarget = last;
    syn.trigger(el, 'mouseenter', options);
}

Answer 2

试试这个

document.getElementById('target').addEventListener('mouseover', function(){
 console.log('mouse inside');
});

document.getElementById('target').addEventListener('mouseout', unction(){
console.log('mouse left');
});

var events = {};



setTimeout(function () {
syn.move({
    from: {clientX: 600, clientY: 300},
    to: {clientX: 50, clientY: 50},
    duration: 1000
}, document.body);

console.log('Syn fired');
}, 200);

setTimeout(function () {
console.log(events);
}, 2000);

Answer 3

根据他们的文档，syn 库会触发事件 mouseover 和 mouseout 用于悬停事件：

document.getElementById('target').addEventListener('mouseover', log);
document.getElementById('target').addEventListener('mouseout', log);

小提琴：

http://jsfiddle.net/g1wjkjw5/2/

如果您真的想将这些事件记录为 mouseenter/mouseleave，您可以在日志函数中转换它们

function log(e) {
    if (e.type == "mouseover") {
        events["mouseenter"] = true
    } else if (e.type == "mouseout") {
        events["mouseleave"] = true
    } else {
        events[e.type] = true;
    }
}

http://jsfiddle.net/g1wjkjw5/4/

编辑：

为了捕获实际的 mouse[enter|leave] 事件，您可以捕获 mouseover/mouseout 事件并将它们转换为正确的事件对象：

document.getElementById('target').addEventListener('mouseover', transformEvent);
document.getElementById('target').addEventListener('mouseout', transformEvent);

function transformEvent(e) {
    var newEvent = false;
    if (e.type == "mouseover") {
        newEvent = "mouseenter";
    } else if (e.type == "mouseout") {
        newEvent = "mouseleave";        
    }

    if (newEvent) {
        e.stopImmediatePropagation();
        e.preventDefault();
        var event = new MouseEvent(newEvent, {
            'view': window,
            'bubbles': true,
            'cancelable': true
          });
        e.toElement.dispatchEvent(event);
    }
}

http://jsfiddle.net/g1wjkjw5/8/