2009-09-14 17 views
43

私は正しいターゲットハンドリングなどのすべての特典付きアンカータグにクリックをシミュレートします。クリックをアンカータグにシミュレートするにはどうすればよいですか?

ががあるようです「[クリック()] [3]」アンカーのDOMオブジェクトのメソッドではなく、すべてのブラウザがそれをサポートしています。また、それは周囲のdiv要素のonclickのハンドラ内で呼ばれていたときに、無限回のクリックが発生する原因となる、オペラ座10とKonquerorのに妙に動作します

Error: anchorObj.click is not a function

:Firefoxは、このエラーがスローされます。 IE8だけでうまく動作すると思います。とにかく私はそれを望んでいない主なブラウザは、主にそれに問題があるので。

私はMozillaフォーラムにおけるFirefoxのためのこの代替解決策を見つけた:

var evt = document.createEvent("MouseEvents"); 
evt.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
anchorObj.dispatchEvent(evt); 

これは私にとってあまりにも醜いと面倒なようです。どのように互換性があるのか​​分かりませんし、可能な限りブラウザ固有のコードを書くことを避けたいと思います。

私はLOCATION.HREF = anchorObj.href使用することはできません。これは "target"属性を処理しないためです。私はターゲットの価値に基づいていくつかのハードコーディングを行うことができますが、私もそれを避けたいと思います。

ありjQueryのへの切り替えの提案があるが、私は前にそれで働いていないので、それはどちらかのターゲットプロパティを処理する方法をうまくわかりません。それでも目標を尊重クリックで問題を抱えている場合は

+0

[JavaScript:javascriptからアンカータグのクリックイベントを呼び出す](http://stackoverflow.com/questions/980709/javascript-invoking-click-event-of-an-anchor-tag-from) -javascript) –

答えて

61

は、clickイベントをシミュレートし、完全なテストケースで接続されているすべてのハンドラを呼び出します(ただし、それらが結合されている)、"target"属性(IEで"srcElement")を維持し、通常のイベントのようになり泡、およびIEのrecursion-をエミュレート防止。クロム2.0、FF 2でテストし、オペラ9.10と当然のIE(6):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script> 
function fakeClick(event, anchorObj) { 
    if (anchorObj.click) { 
    anchorObj.click() 
    } else if(document.createEvent) { 
    if(event.target !== anchorObj) { 
     var evt = document.createEvent("MouseEvents"); 
     evt.initMouseEvent("click", true, true, window, 
      0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     var allowDefault = anchorObj.dispatchEvent(evt); 
     // you can check allowDefault for false to see if 
     // any handler called evt.preventDefault(). 
     // Firefox will *not* redirect to anchorObj.href 
     // for you. However every other browser will. 
    } 
    } 
} 
</script> 
</head> 
<body> 

<div onclick="alert('Container clicked')"> 
    <a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a> 
</div> 

<button type="button" onclick="fakeClick(event, document.getElementById('link'))"> 
    Fake Click on Normal Link 
</button> 

<br /><br /> 

<div onclick="alert('Container clicked')"> 
    <div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div> 
</div> 

<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button> 

</body> 
</html> 

Demo here.

それは、シミュレートされたクリックを開始しているイベントオブジェクトを検査することにより、IE以外のブラウザで再帰を回避イベントのtarget属性(remains unchanged during propagation)を検査します。

明らかにIEは、この内部でそのglobal event objectへの参照を保持しません。 DOMレベル2ではそのようなグローバル変数は定義されていないため、シミュレータはローカルコピーeventを渡す必要があります。それを達成するための簡単な方法があります

+0

更新:initMouseEventは廃止されました。[https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent](https://developer.mozilla.org/)を参照してください。 en-US/docs/Web/API/MouseEvent/initMouseEvent)では代わりにカスタムイベントを使用します。[https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events](https://developer。 mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) – user2315552

11

だけでなく、あなたは非常に迅速にそう

$('#link-id').click(); 

のようにjQueryを介して、クリックディスパッチをテストすることができ、あなたは常にこの

$('#link-id').click(function(event, anchor) 
{ 
    window.open(anchor.href, anchor.target, ''); 
    event.preventDefault(); 
    return false; 
}); 
11

を行うことができますあなたはalrea持っているようhttps://developer.mozilla.org/en/DOM/element.click

The click method is intended to be used with INPUT elements of type button, checkbox, radio, reset or submit. Gecko does not implement the click method on other elements that might be expected to respond to mouse–clicks such as links (A elements), nor will it necessarily fire the click event of other elements.

Non–Gecko DOMs may behave differently.

から引用残念ながら、それが聞こえますdyがあなたの問題に対する最良の解決策を発見しました。サイドノートとして

、私はあなたのソリューションが理想より少ないようだが、あなたは(jQueryのような多くはどうなる)メソッド内の機能をカプセル化した場合、それはそれほど悪くはないことに同意するものとします。ここで

2

HTML

<a href="https://getbootstrap.com/" id="fooLinkID" target="_blank">Bootstrap is life !</a> 

はJavaScript

// Simulating click after 3 seconds 
setTimeout(function(){ 
    document.getElementById('fooLinkID').click(); 
}, 3 * 1000); 

targetプロパティに取り組むとともに、クリックをシミュレートするために、プレーンJavaScriptを使用して。

ここでの作業例はjsFiddleです。

関連する問題