javascript - 使用合成鼠标事件驱动 Javascript 代码

Question

我正在尝试注入(inject)事件以触发 jquery.cluetip.js 库以使用 behat & mink 显示其弹出窗口以用于网站测试目的。我们需要这样做，以便通过 cluetip 为后续测试规则放置所需的 HTML/DOM 元素。

我已经创建了一些代码来触发 cluetip 代码使用的事件，但是尽管 cluetip 确实收到了事件，但出现了问题并且没有显示工具提示。看起来事件没有到达库中正确的事件处理程序。

注入(inject)的测试代码为:

 xpath = $auth->getXpath(); // $auth is a Mink node
 js = <<<'JS'
    return (function(xpath) {
      console.log('************* Calling mouseover/mousemove trigger ***************');
      var xPathRes = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
      var thisNode = xPathRes.singleNodeValue;
      if (thisNode) {
        var mevent,
            nodeWidth2 = thisNode.offsetWidth/2,
            nodeHeight2 = thisNode.offsetHeight/2,
            pageTop = thisNode.offsetTop,
            pageLeft = thisNode.offsetLeft,
            screenTop = pageTop + window.screenY,
            screenLeft = pageLeft + window.screenX,
            eventParams = {
            pageX: pageLeft+nodeWidth2,
            pageY: pageTop+nodeHeight2,
            screenX: screenLeft+nodeWidth2,
            screenY: screenTop+nodeHeight2
        };
        mevent = jQuery.Event('mouseenter', eventParams);
        jQuery(thisNode).trigger(mevent);
        console.log('sent enter');
        mevent = jQuery.Event('mouseover', eventParams);
        jQuery(thisNode).trigger(mevent);
        console.log('sent over');
        mevent = jQuery.Event('mouseover', eventParams);
        jQuery(thisNode).trigger(mevent);
        console.log('sent over');
        mevent = jQuery.Event('mouseover', eventParams);
        jQuery(thisNode).trigger(mevent);
        console.log('sent over');
        console.log('************* Done trigger ***************');
      }
    return thisNode;
    })("{{XPATH}}");
JS;
$js = str_replace('{{XPATH}}', $xpath, $js);

nodeWidth2 计算的目的是在引用元素的中心模拟鼠标事件。

调用时，它会调用 cluetip 库(我已经包含了一些控制台日志记录来演示):

"************* Calling mousever/mousemove trigger ***************" e03842 line 68 > Function:2
"mouseenter mouse - state" jquery.cluetip.js:260
Object { type: "mouseenter", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270770, jQuery182037529489744405187: true, isTrigger: true,     exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:261
"mouseover.cluetip" jquery.cluetip.js:814
Object { type: "mouseenter", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270770, jQuery182037529489744405187: true, isTrigger: true,     exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:815
"sent enter" e03842 line 68 > Function:21
"mouseenter mouse - state" jquery.cluetip.js:260
Object { type: "mouseover", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270772, jQuery182037529489744405187: true, isTrigger: true, exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:261
"mouseover.cluetip" jquery.cluetip.js:814
Object { type: "mouseover", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270772, jQuery182037529489744405187: true, isTrigger: true, exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:815
"sent over" e03842 line 68 > Function:24
"mouseenter mouse - state" jquery.cluetip.js:260
Object { type: "mouseover", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270773, jQuery182037529489744405187: true, isTrigger: true, exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:261
"mouseover.cluetip" jquery.cluetip.js:814
Object { type: "mouseover", pageX: 141.5, pageY: 188.5, screenX: 859.5, screenY: 188.5, timeStamp: 1417103270773, jQuery182037529489744405187: true, isTrigger: true, exclusive: undefined, namespace: "", 7 more… } jquery.cluetip.js:815
"sent over" e03842 line 68 > Function:27
"mouseenter mouse - state" jquery.cluetip.js:260

然而，线索提示代码没有进入“显示”阶段，也没有显示任何内容。

知道哪里出了问题，或者有什么调查途径吗？

[在 Ubuntu Precise/64 上使用 Firefox 33，cluetip 可以很好地处理真实的鼠标移动]

Answer 1

这个答案并没有解决问题，但会有所帮助，而且评论太多了。

我测试了插件 jquery.cluetip与 jquery-1.11.1在 Firefox 33在 Windows 7 / 64通过这个简单的设置:

CSS:
#tipElem.highlight {border: 10px solid blue;}
JS:
// on hover cluetip adds class 'highlight' to the element
$("#tipElem").cluetip({hoverClass: 'highlight'});
// additional event listener
$("#tipElem").on('mouseenter', function(ev) {console.log(ev);});
// trigger 'mouseenter' without defining any event params
window.setTimeout(function() {$("#tipElem").mouseenter();}, 3000);

cluetip将一些元素注入(inject)到 html 中，其中一个元素的 ID 为 cluetip .默认情况下它们是 display: none; .与 Firebug打开后发生以下情况:

• 当鼠标进入时: 1) 应用了边框，所以插件可以工作。 2) 在 jQuery 的事件系统中抛出一个错误。 3)#cluetip留下来display: none;
• 当鼠标离开时: 1) 边框被移除。 2) 错误在 jQuery 中抛出。
• 3 秒后:1) 应用边框。 2) 抛出错误。 3) 事件未记录。

没有Firebug (或使用 Firefox 自己的开发工具)所有步骤都按预期进行。结果:1) 插件可以由合成 mouseenter 触发。即使没有定义任何事件参数。 2) 插件广泛的事件系统与 Firebug 有某种冲突。