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

Question

我正在尝试注入事件来触发jquery.cluetip.js库，以使用behat & mink显示用于网站测试的弹出窗口。我们需要这样做，以便通过线索提示将所需的HTML/DOM元素放在适当的位置，以供后续测试规则使用。

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

注入的测试代码是：

 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

但是，线索提示代码没有到达“show”阶段，并且没有显示任何内容。

有什么想法出了什么问题，或者有什么方法可以调查吗？

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

Answer 1

这个答案不能解决问题，但会有一点帮助，而且对于一个评论来说太多了。

我用这个简单的设置在Windows 7 / 64上的Firefox 33中用jquery-1.11.1测试了插件jquery.cluetip：

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将一些元素注入到html中，其中一个元素的id为cluetip。默认情况下，它们是display: none;。在打开Firebug的情况下，会发生以下情况：

当鼠标进入时

• ：1)边框被应用，所以插件可以工作。2)在jQuery的事件系统内抛出错误。3) #cluetip停留在鼠标离开: 1)边框被移除。2)在jQuery.
• After内部抛出错误3秒: 1)应用边框。2)抛出错误。3)不记录事件。

在没有Firebug的情况下(或者使用火狐自己的开发工具)，所有的步骤都能正常工作。结果: 1)即使没有定义任何事件参数，该插件也可以由合成mouseenter触发。2)插件广泛的事件系统在某种程度上与Firebug冲突。