web-dev-qa-db-ja.com

onclick関数で「this」の参照を保持したまま、アンカータグからonclick（）イベントをプログラムで呼び出すにはどうすればよいですか？

以下は機能しません...（少なくともFirefoxでは：document.getElementById('linkid').click()は関数ではありません）

<script type="text/javascript">
    function doOnClick() {
        document.getElementById('linkid').click();
        //Should alert('/testlocation');
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>
javascriptdom-events
78
Ropstah

apply その要素のコンテキストでのイベントハンドラーが必要です。

var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
    elem.onclick.apply(elem);
}

それ以外の場合、thisは、上記のコードが実行されるコンテキストを参照します。

105
Gumbo

これを解決する最良の方法はVanilla JSを使用することですが、すでにjQueryを使用している場合は、非常に簡単な解決策があります。

<script type="text/javascript">
    function doOnClick() {
        $('#linkid').click();
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

IE8-10、Chrome、Firefoxでテスト済み。

18
luschn

イベントをトリガーするには、基本的にその要素のイベントハンドラーを呼び出します。コードからのわずかな変更。

var a = document.getElementById("element");
var evnt = a["onclick"];

if (typeof(evnt) == "function") {
    evnt.call(a);
}
15
simplyharsh
$("#linkid").trigger("click");
5
guest

確かに、OPはこれはうまくいかないと非常によく述べましたが、私にとってはうまくいきました。私の情報源のメモに基づいて、OPの投稿の前後またはその後に実装されたようです。おそらく今ではもっと標準になっているでしょう。

document.getElementsByName('MyElementsName')[0].click();

私の場合、ボタンにはIDがありませんでした。要素にidがある場合、できれば次の（未テスト）を使用してください。

document.getElementById('MyElementsId').click();

私はもともとこの方法を試しましたが、うまくいきませんでした。グーグルの後、私は戻って自分の要素が名前であり、IDを持っていなかったことに気付きました。正しい属性を呼び出していることを再確認してください。

ソース： https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

2
Tyler Montney

HandleEventメソッドをご覧ください
https://developer.mozilla.org/en-US/docs/Web/API/EventListener

「未加工の」Javascript：

function MyObj() {
   this.abc = "ABC";
}
MyObj.prototype.handleEvent = function(e) {
   console.log("caught event: "+e.type);
   console.log(this.abc);
}

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj);

ここで、要素（ID「myElement」）をクリックすると、コンソールに次のように出力されます。

キャッチイベント：クリック
ABC

これにより、オブジェクトメソッドをイベントハンドラーとして使用し、そのメソッドのすべてのオブジェクトプロパティにアクセスできます。

あなたはできないだけでオブジェクトのメソッドをaddEventListenerに直接（例えば：element.addEventListener('click',myObj.myMethod);）渡し、myMethodを期待する私がオブジェクトに対して通常呼び出されたかのように振る舞います。 addEventListenerに渡された関数は、参照されるのではなく、何らかの方法でコピーされると推測しています。たとえば、イベントリスナー関数の参照を（変数の形式で）addEventListenerに渡し、この参照の設定を解除した場合、イベントがキャッチされるとイベントリスナーが実行されます。

メソッドをイベントリスナーとして渡し、thisを保持し、それでもイベントリスナー内のオブジェクトプロパティにアクセスする別の（エレガントではない）回避策は、次のようなものです。

// see above for definition of MyObj

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj));
1
Rolf

古いスレッドですが、質問はまだ関連していますので...

（1）あなたの質問の例は今は Firefoxで動作します。ただし、イベントハンドラー（アラートを表示する）の呼び出しに加えて、リンクをまたクリックすると、ナビゲーションが発生します（アラートが消えると）。

（2）JUSTイベントハンドラーを呼び出す（ナビゲーションをトリガーせずに）だけを置き換えます：

document.getElementById('linkid').click();

と

document.getElementById('linkid').onclick();
0
Doin

これを純粋にonclick属性で関数を参照するために使用している場合、これは非常に悪い考えのようです。インラインイベントは一般に悪い考えです。

次のことをお勧めします。

function addEvent(Elm, evType, fn, useCapture) {
    if (Elm.addEventListener) {
        Elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (Elm.attachEvent) {
        var r = Elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        Elm['on' + evType] = fn;
    }
}

handler = function(){
   showHref(el);
}

showHref = function(el) {
   alert(el.href);
}

var el = document.getElementById('linkid');

addEvent(el, 'click', handler);

他のJavaScriptコードから同じ関数を呼び出したい場合、クリックして関数を呼び出すことをシミュレートするのは最善の方法ではありません。考慮してください：

function doOnClick() {
   showHref(document.getElementById('linkid'));
}
0
David Snabel-Caunt