18

このプロジェクトでのみJavaScriptを使用する必要があります。申し訳ありませんが、jQueryはありません（私も恥ずかしいと思います）。

addEventListenerdivにを追加しています。「問題」は、それがすべての子供たちにも当てはまるということです。

これを回避し、リスナーをそのdivに対してのみ機能させる方法はありますか？

よろしくお願いします。

私のコードは次のようになります：

document.getElementById(myObj.id).addEventListener("mousedown", myObjDown, false);

function myObjDown() {
  //do stuff here
}
4

3 に答える 3

30

コールバックを読み取ることevent.targetで、イベントが実際に発生した要素を知ることができます。

var el = ...
el.addEventListener('click', function(event){
  if (el !== event.target) return;

  // Do your stuff.

}, false);

もう1つのオプションは、イベントが親ハンドラーに到達しないようにハンドラーを子要素にバインドすることですが、これはより多くの作業であり、実際に親の上でイベントをリッスンしている可能性のあるものからイベントを隠す可能性があります。

アップデート

サンプルコードがあれば、これを実行できるはずです。

var el = document.getElementById(myObj.id);
el.addEventListener("mousedown", myObjDown, false);

function myObjDown(event) {
  if (el !== event.target) return;

  //do stuff here
}

また、一般的な注意として、IE <9addEventListenerではサポートされていないため、これがIE<9で機能する場合はないことに注意してください。

于 2012-12-17T16:58:19.830 に答える
14

currentTargetイベントプロパティを使用できます

el.addEventListener('click', function(event) {
  if (event.currentTarget !== event.target) {
    return;
  }

  // Do your stuff.
}, false);

詳細：https ：//developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

于 2015-05-29T08:27:25.300 に答える
2

これは、myObjDown関数を一般的なイベントハンドラーと一致させるための代替手段です。（イベント呼び出し要素への参照としてe.targetを使用）

var CssSelector = "div.className";
var elms = document.querySelectorAll(CssSelector);

for (i = 0; i < elms.length; i++) {
    elms[i].addEventListener("mousedown", myObjDown.bind(null, {"target":elms[i]}, false);
}

function myObjDown(e) {
  console.log("event: %o - target: %o", e, e.target);

  var elm = e.target;
  //do stuff here
}

それが提案されました..

この方法では、一部のブラウザのバージョンでメモリリークが発生する可能性があります。誰かがこれを経験したり、貴重な洞察を持っている場合。コメントしてください。

代替案は、この点で

var CssSelector = "div.className";
var elms = document.querySelectorAll(CssSelector);

for (i = 0; i < elms.length; i++) {
    elms[i].addEventListener("mousedown", myObjDown.bind(null, elms[i].id}, false);
}

function myObjDown(id) {
  console.log("element: %o ", document.getElementById(id));

  //do stuff here
}
于 2015-01-11T00:23:16.257 に答える