2014-11-27 1 views
2

Я пытаюсь ввести события, чтобы вызвать библиотеку jquery.cluetip.js, чтобы отобразить ее всплывающее окно для целей тестирования сайта с использованием правила &. Мы должны сделать это, чтобы необходимые элементы HTML/DOM были установлены на месте cluetip для последующих тестовых правил.Вождение Код Javascript с синтетическими событиями мыши

Я создал код для запуска событий, используемых кодом 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 

Однако код cluetip не попасть на «шоу» сцену и ничего отображается.

Любые идеи о том, что происходит не так, или авиалинии для расследования?

[с помощью Firefox 33 на Ubuntu Precise/64, cluetip отлично работает с движением реальной мыши]

+0

В каком браузере у вас возникла проблема? – MarcoL

+0

Я использую Firefox 33 в Linux. – rivimey

ответ

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 вводит некоторые элементы в HTML, один из них имеет идентификатор cluetip. По умолчанию они равны display: none;. С Firebug открыт следующий:

  • Когда мышь входит: 1) Граница применяется, поэтому плагин работает. 2) Ошибка в системе событий jQuery. 3) #cluetip остается display: none;
  • Когда листья мыши: 1) граница удалена. 2) Ошибка вызывается внутри jQuery.
  • Через 3 секунды: 1) применяется граница. 2) Ошибка. 3) Событие не регистрируется.

Без Firebug (или с собственными инструментами разработчика Firefox) все этапы работают должным образом. Результат: 1) Плагин может запускаться синтетическим mouseenter даже без определенных параметров события. 2) Широкая система событий плагинов как-то конфликтует с Firebug.

+0

Спасибо, Мартин за то, что ушел. Очень признателен. – rivimey