web-dev-qa-db-ja.com

関数を呼び出した要素のIDを取得します

JS関数を呼び出した要素のIDを取得するにはどうすればよいですか？

body.jpgは、ユーザーがマウスを画面の周りで体のさまざまな部分に向けると、拡大画像が表示される犬の画像です。 area要素のIDは、画像ファイル名からフォルダーと拡張子を除いたものと同じです。

<div>
    <img src="images/body.jpg" usemap="#anatomy"/>
</div>

<map name="anatomy">
  <area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom()"/>
</map>

<script type="text/javascript">
function zoom()
{
 document.getElementById("preview").src="images/nose.jpg";
}
</script>

<div>
<img id="preview"/>
</div>

私は調査を終え、最後の手段としてStack Overflowに来ました。私はjQueryを使用しないソリューションを好みます。

javascripteventsdom-events
59
Ambo100

呼び出されたときに、要素への参照を関数に渡します。

<area id="nose" onmouseover="zoom(this);" />

<script>
  function zoom(ele) {
    var id = ele.id;

    console.log('area element id = ' + id);
  }
</script>
79
James Sumners

イベントハンドラでthisの使用に言及している人がいないことに驚いています。最新のブラウザで自動的に動作し、他のブラウザで動作するようにできます。 addEventListenerまたはattachEventを使用してイベントハンドラーをインストールする場合、thisの値を、イベントを作成したオブジェクトに自動的に割り当てることができます。

さらに、プログラムでインストールされたイベントハンドラーのユーザーは、JavaScriptコードをHTMLから分離できます。

プレーンjavascriptのコードでこれを行う方法は次のとおりです。

HTMLからonmouseover="zoom()"を削除し、次のようにjavascriptにイベントハンドラーをインストールします。

// simplified utility function to register an event handler cross-browser
function setEventHandler(obj, name, fn) {
    if (typeof obj == "string") {
        obj = document.getElementById(obj);
    }
    if (obj.addEventListener) {
        return(obj.addEventListener(name, fn));
    } else if (obj.attachEvent) {
        return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
    }
}

function zoom() {
    // you can use "this" here to refer to the object that caused the event
    // this here will refer to the calling object (which in this case is the <map>)
    console.log(this.id);
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

// register your event handler
setEventHandler("nose", "mouseover", zoom);
9
jfriend00

イベントハンドラで「this」を使用できます。

document.getElementById("preview").onmouseover = function() {
    alert(this.id);
}

または、次のようにイベントオブジェクトをハンドラーに渡します。

document.getElementById("preview").onmouseover = function(evt) {
    alert(evt.target.id);
}

AttachEvent（for IE <9）/ addEventListener（IE9およびその他のブラウザー）を使用してイベントをアタッチすることをお勧めします。上記の例は簡潔にするためのものです。

function myHandler(evt) {
    alert(evt.target.id);
}

var el = document.getElementById("preview");
if (el.addEventListener){
    el.addEventListener('click', myHandler, false); 
} else if (el.attachEvent){
    el.attachEvent('onclick', myHandler);
}
4
mixel

次のようにハンドラーのセットアップをコーディングできます。

<area id="nose" shape="rect" coords="280,240,330,275" onmouseover="zoom.call(this)"/>

次に、ハンドラー内のthisは要素を参照します。ここで、<area>タグにハンドラーがある場合に何が起こるかが100％わからないという警告を提供します。これは、主に<area>タグが10年ほど。 Ithinkそれはあなたにイメージタグを与えるはずですが、それは間違っている可能性があります。

edit—はい、間違っています-<area>ではなく<img>タグを取得します。そのため、その要素の親（マップ）を取得し、それを使用している画像（つまり、「usemap」属性がマップの名前を参照する<img>）を見つける必要があります。

もう一度編集します—あなたがwantエリアの "id" durrであるため、それは問題ではありません。正しく読んでいないため申し訳ありません。

2
Pointy

JQueryソリューションが必要ないことはわかっていますが、HTMLにJavaScriptを含めることは大したことではありません。

私はあなたがそれを行うことができることを意味しますが、すべきではない理由はたくさんあります（詳細が必要な場合は控えめなjavascriptを読んでください）。

したがって、この質問を見るかもしれない他の人々の利益のために、ここにjQueryソリューションがあります：

$(document).ready(function() {
  $('area').mouseover(function(event) {
    $('#preview').attr('src', 'images/' + $(event.srcElement).attr('id'));
  });
});

主な利点は、JavaScriptコードとHTMLを混在させないことです。さらに、これを1回記述するだけで、すべてのタグで機能します。それぞれに対して個別にハンドラーを指定する必要はありません。

追加の利点は、すべてのjQueryハンドラーが、イベントのソース、イベントのタイプなど、多くの有用なデータを含むイベントオブジェクトを受け取ることです。これにより、目的のコードを簡単に記述できるようになります。

最後に、jQueryであるため、クロスブラウザのものについて考える必要はありません-特にイベントを処理する場合の大きな利点です。

1
Gregory Mostizky

私もこれが起こるようにしたいので、呼び出された関数の要素のIDを渡し、私のjsファイルで使用します：

function copy(i,n)
{
 var range = document.createRange();
range.selectNode(document.getElementById(i));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range); 
document.execCommand('copy');
window.getSelection().removeAllRanges();
document.getElementById(n).value = "Copied";
}
0
Fit Coder