2012-04-03 5 views
3

У меня есть страница с несколькими ссылками, которые все так:клик() не работает со ссылками

<a href="/" class="answer-item" rel="0">10</a> 

Я хотел бы использовать функцию мыши(), чтобы имитировать щелчок пользователя на одном из их, но он не работает в моих тестах.

//Evaluate a mathematical expression from another part of the page 
var numberAnswer = eval(document.getElementById("question-title").getElementsByTagName("b")[0].innerHTML); 

//Builds an array with the links that may match the expression 
var choices = document.getElementsByClassName('answer-item'); 

//Iterates through array to find a match then clicks it 
for(var i in choices){ 
    if(choices[i].innerHTML == numberAnswer){ 
     choices[i].click(); 
     break; 
    } 
} 

Я уверен, что choices[i] правильный элемент.

Firefox ничего не делает, Opera ничего не делает, и щелчок() недоступен в Chrome (я думаю).

Кроме того, я пытался использовать dispatchEvent() в такой форме:

var evt = document.createEvent('MouseEvents'); 
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
choices[i].dispatchEvent(evt); 

Это, видимо, вернулся true в Firefox и Chrome, но ничего не изменилось.

Самая назойливая часть заключается в том, что ссылка только с атрибутом href отлично работает с .click().

ответ

3

EDIT

За обсуждение в области комментария, кажется, что поведение, используемое в этом ответе не является стандартным, или по крайней мере не последовательно через агент пользователя. Я изучаю этот вопрос дальше; если вы используете информацию в этом ответе, внимательно проверьте код во всех браузерах, чтобы убедиться, что он работает так, как ожидалось.


EDIT 2

За комментарием от OP, есть «только, чтобы это произошло» подход, который будет работать здесь. У этого есть некоторые недостатки, а именно, что ваши связанные события не могут вызвать preventDefault - этот метод не будет его уважать. Вы могли бы построить какой-то обертки событий, которые могли бы быть в состоянии справиться с этим ... в любом случае, вот код и скрипку:

HTML:

<br><br> 
<!-- I am totally misusing this API! --> 
<a href="http://jsfiddle.net/echo/js/?delay=0&js=The link was followed;" id="progra_link">Some link with an event that uses preventDefault()</a> 
<br><br> 
<button id="doit_btn">Programmatically click the link</button> 

Сценарий:

function do_program_click() { 
    var lnk = document.getElementById('progra_link'); 
    var loc = lnk.href; 
    if (!loc) 
     return false;    
    // call this to fire events 
    lnk.click(); 

    // then follow the link 
    document.location = loc; 
    return; 
}; 
function addEvent(element, evnt, funct){ 
    if (element.attachEvent) 
    return element.attachEvent('on'+evnt, funct); 
    else 
    return element.addEventListener(evnt, funct, false); 
} 

// bind an event to the link to test force event trigger 
addEvent(
    document.getElementById('progra_link'), 
    'click', 
    function (e) { 
     e.preventDefault(); 
     alert('Testing element click event, default action should have been stopped'); 
     return false; 
    } 
); 
// bind event to the leeroy button 
addEvent(
    document.getElementById('doit_btn'), 
    'click', 
    do_program_click 
); 

jsFiddle : http://jsfiddle.net/CHMLh/


Оригинальный ответ

Ваш образец кода является неполным. Если я только основы, она работает правильно:

<script> 
    var lnk = document.getElementById('test'); 
    lnk.click(); 
</script> 
<a id="test" href="/" class="answer-item" rel="0">test link</a> 

jsFiddle: http://jsfiddle.net/cgejS/

Я бы переоценивать свои предположения, что вы имеете дело с правильным элементом DOM.

На несвязанной ноте, это:

var numberAnswer = eval(document.getElementById("question-title").getElementsByTagName("b")[0].innerHTML); 

... что? eval - это зло - если вы когда-либо используете его по какой-либо причине, задайте вопрос, имеете ли вы правильный подход. Вы пытаетесь получить целое число из строки? См parseInt (docs), правильный инструмент для этой работы:

// this line is still failure-prone... 
var ele = document.getElementById("question-title").getElementsByTagName("b")[0]; 
var numberAnswer = 0; 
if (ele) 
    numberAnswer = parseInt(ele.innerHTML); 
+0

Не уверен, какой браузер вы используете, но в Chrome делает ваш код ничего (даже с чем-то, отличным от '/' как URL-адресом) –

+0

jsFiddle, который я опубликовал в Firefox, перемещает панель результатов на домашнюю страницу jsFiddle - это следует за URL-адресом, как и ожидалось. Будет протестирован в Chrome и обновлен. –

+0

Подтвердите - это не работает в Chrome. Будет редактировать, спасибо за информацию. –

0

Easy.

HTML, (обратите внимание, что я добавил Ид 'тег):

<a id="answer-item" href="/" class="answer-item" rel="0">10</a>

JS:

document.getElementById('answer-item').click(); 
+0

Примечание: это не работает в Chrome, но это ограничение самого браузера –

+0

Добавление идентификатора и использование 'getElementById()' не помогло, но вы можете объяснить, почему это было бы? Мой код уже получает нужный элемент. – MarkM

+2

Это не «легко» - проблема сложнее. Пожалуйста, ознакомьтесь с комментариями к моему ответу для получения дополнительной информации. В принципе, я считаю, что 'click()' НЕ должен работать в этом случае, тот факт, что он делает это нестандартно и/или ошибка. –

Смежные вопросы