javascript - 在 DOM 中双击了哪个 HTML 元素

Question

我想检测双击了哪个 HTML 元素。似乎在我的代码中没有触发。以下是我的 HTML 代码结构，您可以在其中双击检测单击了哪个元素。

  <div id="mainWrapper">
       <div id="Banner" name="Banner" class="editable">This is the banner</div>
       <div id="MainMenu" class="editable">This is the main menu</div>
       <div id="LeftSideBar" class="editable">This is the submenu or left sidebar content</div>
       <div id="MainContent"class="editable">Here is the main content</div>
       <div id="RightSideBar" class="editable">Here are commercial ads</div>
       <div id="Footer"class="editable">This is the footer
          <a href="index.php">Go Home</a>
       </div>
  </div>

外部 JavaScript

window.onload = function(){
  // Listen to the double click event.
  if ( window.addEventListener )
     document.body.addEventListener( 'dblclick', onDoubleClick, false );
}

获取触发事件的元素。这不一定是事件所附加到的元素。

function onDoubleClick( ev ){
  var element = ev.target || ev.srcElement;  //target = W3C,  srcElement = Microsoft
  alert(ev.type); //displays which event has fired

  var targ;
  if (!ev) var e = window.event;
  if (ev.target) targ = ev.target;  
  else if (ev.srcElement) targ = ev.srcElement;

  alert(ev.target); //displays which type of html element has been clicked (it shows div but not which div)

  // Find out the div that holds this element.
  var name;
  do {
    element = element.parentNode;
  }
  while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || 

  element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )

  alert("The class name for the element is " + element.className); // I get nothing
  alert("The node name for the html element is " + element.nodeName);// I get "body"
}

Answer 1

我不确定您要完成什么。是为了让人们可以编辑东西吗？我很想将 onclick 事件监听器仅应用于您想要编辑的那些元素。如果它们都有“可编辑的”css 类，那么使用 jquery 这样做是微不足道的:

$('.editable').dblclick(dblclickFunc)

这会将事件监听器应用于具有可编辑类的每个元素。但是，为了使其更有用，我将其更改为

$('.editable').dblclick(function(e){ dblclickFunc(e, this);  })

和功能

dblclickFunc(e, el){
     alert('received an event of type ' + e.type + ' on ' + el.tagName);
}

因此，您已经获得了对发送事件的元素的引用。从那里，您可以检查 ID，甚至可以遍历所有可编辑元素并将它们与传递给您的元素进行比较。一旦匹配成功，您就可以准确地知道点击了哪个元素。