0

これは非常に基本的な質問ですが、答えを見つけるのに苦労しています-HTMLメニューのリスト項目がクリックされたときに実行されるアクションを実装するにはどうすればよいですか？

コード内のリストをメニューとして使用しています。たとえば、次のようになります。

<ul  >
<li id="link1"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2a</a></li>
    <li><a href="#">Link 2b</a></li>
    <li><a href="#">Link 2c</a></li>
  </ul></li>
</ul>

メニューにid、id = "myMenu"、およびonclickイベントを指定しようとすると、jsが呼び出されましたが、クリックされたアイテムを識別する方法がわかりませんでした。myMenuでラインアイテムがクリックされただけです。 

<ul id="myMenu" onclick="gothere(id)">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2a</a></li>
    <li><a href="#">Link 2b</a></li>
    <li><a href="#">Link 2c</a></li>
  </ul></li>
</ul>

<script type="text/javascript">
function gothere(id)
{
alert("got here "+id) ; 
}
</script>

子要素id="link1"にIDを追加しようとしましたが、それは機能しましたが、jsが子に対して呼び出され、次に親に対して呼び出されました。

<ul id="myMenu" onclick="gothere(id)">
<li id="link1" onclick="gothere(id)"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2a</a></li>
    <li><a href="#">Link 2b</a></li>
    <li><a href="#">Link 2c</a></li>
  </ul></li>
</ul>

このアプローチを使用して必要なものを取得できますが、より良い方法はありますか？

送信するHTMLの量が最も少ないものを探しています（以前の実装からこのメニューをやり直している理由）。

4

3 に答える 3

1

イベントをインラインで添付しないでください。それらをjavascriptで添付します。

<ul id="myMenu">
<li id="link1"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2a</a></li>
    <li><a href="#">Link 2b</a></li>
    <li><a href="#">Link 2c</a></li>
  </ul></li>
</ul>​

ここでは簡単にするためにjQueryを使用していることに注意してください。

$("#myMenu").click(function(e){
    console.log(e.target);
});​

http://jsfiddle.net/2rjgd/

バニラJavaScriptの概念は同じです。オブジェクトのtargetプロパティを使用して、イベントeventがどこから発生したかを調べます。click

http://jsfiddle.net/2rjgd/1/は、これがvanillajsでどのように実装されるかを示しています。（IE以外のブラウザーの場合）

document.getElementById("myMenu").addEventListener("click", function(e){
    console.log(e.target);
});​
于 2012-09-19T17:06:38.393 に答える
1

ハンドラーで要素ターゲットまたはsrcElementを識別し、引数を渡さないでください。

document.getElementById("myMenu").onclick=goThere;

function goThere(e){
  e= e || window.event;
  var who=e.target || e.srcElement;
  if(who.tagName=='LI'){
    //handle the clicked list item

  }
}
于 2012-09-19T17:27:33.687 に答える
0

何らかの方法で、クリックされている要素を識別する方法が必要です。Shmiddtyは、名前でクリックされた要素のターゲットを見つける方法を提供しました。次に、if / thenステートメントを記述してウィンドウを開くか、特定の名前に基づいてリンクをたどることができます。

これは、要素にIDを割り当ててチェックするよりも、実行が難しい/複雑になる可能性があります。次のようなステートメントを使用して、vanillajsでこれを行うことができます。

var myLink1 = document.getElementById("link1");
myLink1.onclick=window.open("http://www.webaddresshere.com","_self");

可能であれば、JQueryを使用することをお勧めします。これにより、次のようなことができます。

$('li[id^=link1]').click(window.open("http://www.webaddresshere.com","_self"));
于 2012-09-19T17:16:24.490 に答える