3

私はすべてこのようないくつかのリンクを持つページを持っています：

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

この関数を使用してclick()、ユーザーがそのうちの1つをクリックするのをシミュレートしたいのですが、私のテストでは機能しないようです。

//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は何もしません、そしてclick（）は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()です。

4

2 に答える 2

3

編集

コメント エリアでの議論によると、この回答で使用されている動作は非標準であるか、少なくともユーザー エージェント全体で一貫していないようです。この問題をさらに調査しています。この回答の情報を使用する場合は、すべてのブラウザでコードを注意深くチェックして、期待どおりに動作することを確認してください。

編集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);
于 2012-04-03T20:35:45.887 に答える
0

簡単。

HTML (「id」タグを追加したことに注意してください):

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

JS:

document.getElementById('answer-item').click();
于 2012-04-03T20:39:54.847 に答える