javascript - onmousedown を使用して、マウスダウンした要素の ID を取得しますか?

Question

これは可能ですか？

後で別の div でその要素を再作成するためにクリックした要素の ID を返す onmousedown の関数を作成しようとしています。

Answer 1

event delegationを使用して、基本的に 1 つのイベント ハンドラーのみをドキュメント全体に接続し、event.targetを使用して、イベントが最初にディスパッチされた要素を取得できます。

document.body.onmousedown = function (e) {
  e = e || window.event;
  var elementId = (e.target || e.srcElement).id;

  // call your re-create function
  recreate(elementId);
  // ...
}

function recreate (id) {
  // you can do the DOM manipulation here.
}

編集:次の方法で、すべての Scriptaculous ドラッグ可能オブジェクトにイベントを割り当てることができます。

Event.observe(window, 'load', function () {
  Draggables.drags.each(function (item) {
    Event.observe(item.element, 'mousedown', function () {
      alert('mouseDown ' + this.id); // the this variable is the element 
    });                              // which has been "mouse downed"
  });
});

ここで例を確認してください。

Answer 2

CMS にはほとんど正しい答えがありますが、もう少しクロス ブラウザ フレンドリーにする必要があります。

document.body.onmousedown = function (e) {
  // Get IE event object
  e = e || window.event;
  // Get target in W3C browsers & IE
  var elementId = e.target ? e.target.id : e.srcElement.id;
  // ...
}

Answer 3

div id を複製したい場合、簡単な方法は次のような cloneNode です。

<div id="node1">
  <span>ChildNode</span>
  <span>ChildNode</span>
</div>

<div id="container"></div>

<script type="text/javascript">
  var node1 = document.getElementById('node1');
  var node2 = node1.cloneNode(true);

  node2.setAttribute('id', 'node2');

  var container = document.getElementById('container');
  container.appendChild(node2);
</script>