Question

我有一个页面，其中包含几个类似的链接：

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

我想使用click（）函数模拟用户点击其中一个，但它似乎在我的测试中不起作用。

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

这显然在Firefox和Chrome中返回了true，但没有改变任何内容。

最麻烦的部分是只有href属性的链接可以与.click()一起使用。

Answer 1

修改

在评论区域中的每个讨论中，似乎此答案中使用的行为是非标准的，或者至少在用户代理之间不一致。我正在进一步研究这个问题;如果您使用此答案中的信息，请仔细检查所有浏览器中的代码，以确保其按预期工作。

编辑2

根据OP的评论，这里有一个“只是实现它”的方法。它有一些缺点，即你的绑定事件不能调用preventDefault - 这种方法不会尊重它。你可以构建一些可能能够解决这个问题的事件包装器...无论如何，这里是代码和小提琴：

HTML：

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

Answer 2

易。

HTML（请注意我添加了'id'标记）：

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

JS：

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

click（）不适用于链接

2 个答案: