onclickを使えばクリック元の位置を判断することができますが、 onclickばかりが並ぶのはよろしくないとききました。そこで、イベントリスナーを使うことにしました。しかし、onclickを使わずに位置を特定することができません。サンプルではthis.targetで取得できないか試してみましたが t.style.backgroundColorでtの部分でエラーになります。 onclickを使わずにクリック元を特定する方法はないでしょうか。～～～～～1まで続く～～～ 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); }

onclickを使わずにクリック元を特定したい

解決済

質問者：taurin1000kg
質問日時：2012/06/13 13:24
回答数：5件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

No.5

回答者： dscripty
回答日時：2012/06/13 15:54

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>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

cssも使えますね。有難うございます。

通報する

お礼日時：2012/07/06 21:03

No.4

回答者： taloo
回答日時：2012/06/13 15:20

すみません、コピーペーストしたので間違えました。

訂正です。 via:No.1
× addEventListner
○ addEventListener

- 0
- 件

通報する

この回答へのお礼

訂正有難うございます。

通報する

お礼日時：2012/07/06 21:02

No.3ベストアンサー

回答者： taloo
回答日時：2012/06/13 15:18

>cds[1].addEventListner('click',fg(this.target),false);

第二引数は関数そのものを渡してください。

cds[1].addEventListner('click',fg,false);

fg関数内では、引数がイベントオブジェクトで、
イベントオブジェクト.targetに対象となる要素が入っています。

function fg(e){
var t=e.target;
以下略
}

- 0
- 件

通報する

この回答へのお礼

有難うございます。

通報する

お礼日時：2012/07/06 21:01

No.2

回答者： fujillin
回答日時：2012/06/13 14:15

要領のみですが・・・

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の場合はイベントのバインド方法が異なったりします。