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

Mouse events not fired by event listener using Syn.js

本文关键字：事件 鼠标 侦听器 js 使用 Syn      更新时间：2023-09-26

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

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

任何指向我可能缺少什么的指示？ 或者如何使事件着火？

我的测试用例：

（js小提琴：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>

Mozilla可能不会让你

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

jQuery做了其他人的建议

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

这是一个使用修改后的 Syn 的 jsfiddle .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);
}

试试这个

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

根据他们的文档，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]事件，您可以捕获鼠标悬停/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/

相关文章：