web-dev-qa-db-ja.com

onclickメソッドをアクティブにするための偽の「クリック」

onclickメソッドを持つ要素があります。

別の関数内でそのメソッドをアクティブにします(または、この要素をクリックします)。

これは可能ですか?

46
yoavf

JQueryを使用している場合、次のことができます。

$('#elementid').click();
60

要素を選択したら、click()を呼び出すことができます

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

参照: https://developer.mozilla.org/En/DOM/Element.click

これがIEで機能するかどうかは覚えていませんが、そうすべきです。近くにWindowsマシンがありません。

62
Ben

私はあなたの質問を誤解しているかもしれませんが、はい、これは可能です。私がそれを行う方法はこれです:

var oElement = document.getElementById('elementId');   // get a reference to your element
oElement.onclick = clickHandler; // assign its click function a function reference

function clickHandler() {
    // this function will be called whenever the element is clicked
    // and can also be called from the context of other functions
}

これで、この要素がクリックされるたびに、clickHandlerのコードが実行されます。同様に、他の関数のコンテキスト内から関数を呼び出すことで同じコードを実行できます(または、他の要素によってトリガーされたイベントを処理するためにclickHandlerを割り当てることもできます)>

7
Tom
_var clickEvent = new MouseEvent('click', {
  view: window,
  bubbles: true,
  cancelable: true
});
var element = document.getElementById('element-id'); 
var cancelled = !element.dispatchEvent(clickEvent);
if (cancelled) {
  // A handler called preventDefault.
  alert("cancelled");
} else {
  // None of the handlers called preventDefault.
  alert("not cancelled");
}
_

_element.dispatchEvent_ はすべての主要なブラウザでサポートされています。上記の例は、サンプル simulateClick() MDNの関数 に基づいています。

4

JQueryを使用している場合、.trigger関数を使用する必要があるため、次のようになります。

element.trigger('click');

http://api.jquery.com/trigger/

4

これは、PrototypeやJQueryなどのJavaScriptライブラリを使用して、ブラウザ間の違いを抽象化する必要がある場合の完璧な例です。

3
RedFilter

「onclick」を呼び出すだけです!

htmlの例を次に示します。

<div id="c" onclick="alert('hello')">Click me!</div>
<div onclick="document.getElementById('c').onclick()">Fake click the previous link!</div>
2
hasen

IE fireEvent() メソッドがあります。他のブラウザで機能するかどうかはわかりません。

2
Vilx-

javascriptを使用すると、以下の例のように click() および focus() をトリガーできます。

document.addEventListener("click", function(e) {
  console.log("Clicked On : ",e.toElement);
},true);
document.addEventListener('focus',function(e){
  console.log("Focused On : ",e.srcElement);
},true);

document.querySelector("#button_1").click();
document.querySelector("#input_1").focus();
<input type="button" value="test-button" id="button_1">
<input type="text" value="value 1" id="input_1">
<input type="text" value="value 2" id="input_2">
2
Niklesh Raut

私はjQueryを使用していませんが、最初に言及したメソッドであるIIRCはonclickハンドラーをトリガーしません。

イベントの詳細を使用していない場合は、関連するonclickメソッドを直接呼び出します。

1
Can Berk Güder