![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
onclickを使えばクリック元の位置を判断することができますが、
onclickばかりが並ぶのはよろしくないとききました。
そこで、イベントリスナーを使うことにしました。
しかし、onclickを使わずに位置を特定することができません。
サンプルではthis.targetで取得できないか試してみましたが
t.style.backgroundColorでtの部分でエラーになります。
onclickを使わずにクリック元を特定する方法はないでしょうか。
<div id="id">
<div id="sample129" class="cn">
<div>~</div>
<div>~</div>
</div>
<div id="sample128" class="cn">
<div>~</div>
<div>~</div>
</div>
~1まで続く~
<div id="sample1" class="cn">
<div>~</div>
<div>~</div>
</div>
</div>
<script type="text/javascript">
var dom = document.getElementById('id');
var cds = dom.childNodes;
if(cds[1].className=="cn"){
cds[1].addEventListner('click',fg(this.target),false);
}
function fg(t) {
t.style.backgroundColor = "#000000";
var url = "http://test/" + t.id + "/";
window.open(url);
}
</script>
No.5
- 回答日時:
Chrome だとフォーカスを維持してくれないから a:focus の効果がなくなるけど、Internet Explorer 8 と Firefox 13 はいけた。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>onclickを使わずにクリック元を特定したい</title>
<style>
body { font-family:arial, meiryo, sans-serif; }
.cn > a { display:block; text-decoration:none; }
.cn > a > span { display:block; }
.cn > a:focus { background-color:black; }
.cn+.cn { padding-top:1em; }
</style>
</head>
<body>
<h1>onclickを使わずにクリック元を特定したい</h1>
<div id="id">
<div class="cn">
<a href="http://example.org/sample129/" target="_blank">
<span>~</span>
<span>~</span>
</a>
</div>
<div class="cn">
<a href="http://example.org/sample128/" target="_blank">
<span>~</span>
<span>~</span>
</a>
</div>
<div class="cn">
<a href="http://example.org/sample127/" target="_blank">
<span>~</span>
<span>~</span>
</a>
</div>
</div><!-- #id -->
</body>
</html>
No.4
- 回答日時:
すみません、コピーペーストしたので間違えました。
訂正です。 via:No.1× addEventListner
○ addEventListener
No.2
- 回答日時:
要領のみですが・・・
document.getElementById("id").addEventListener("click", function(evt){
var t = evt.target;
while(t && t.className != "cn") t = t.parentNode;
if(t) t.style.backgroundColor = "#000";
}, false);
イベントハンドラの第一引数にイベントオブジェクトが返されるので、それを用いて要素を特定できます。
そこからclass="cn"の要素に遡って、背景色を変える部分のみの例。
実際にはクラス設定が複数あったり(class="abc cn"とか)する可能性があるし、また、IEの場合はイベントのバインド方法が異なったりします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
jQueryで特定id以外の下にある...
-
表示・非表示のスクリプトで、...
-
iframe内のリンクが飛ばないの...
-
classの中の<a>タグにidを追加
-
removeEventListenerについて
-
getElementByIdの戻り値がnull...
-
クリックするとテーブルの列の...
-
複数のリンク画像を一定時間で...
-
console.log結果をhtmlで表示し...
-
クリックする度に表示/非表示が...
-
javascriptにフェードインを追...
-
[JavaScript]IE11にてフリック...
-
jQueryで同じid属性が複数あっ...
-
javascriptでオブジェクトの重...
-
onclickを使わずにクリック元を...
-
JSで動的にリンクを作成
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
おすすめ情報