在DOM中双击了哪个HTML元素

Which HTML element was Double Clicked in the DOM

本文关键字：HTML 元素 DOM 双击      更新时间：2023-09-26

我想检测双击了哪个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"
}

我不确定你到底想完成什么。这样人们就可以编辑东西吗？我很想将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，甚至可以循环浏览所有可编辑元素，并将它们与传递给您的元素进行比较。一旦你匹配了，你就可以准确地知道点击了哪个元素。

您在示例中使用了JavaScript，但您也用jQuery标记了这个问题，所以我认为可以使用jQuery。事实上，使用jQuery的API可以极大地简化这种类型的事件处理，因为它可以规范所有现代浏览器的事件。强烈推荐。

您可以将事件委托给document，并使用on()函数使用jQuery检测整个文档中的所有双击：

$(document).on('dblclick', function(e) {
    console.log(e.target); // target is the element that triggered the event
    alert("The class name for the element is " + e.target.className);
    alert("The node name for the html element is " + e.target.nodeName);
});

如果你想监听特定容器中的某些元素，可以试试这个：

$('#mainwrapper').on('dblclick', 'div', function(e) {
    console.log(e.target);
});

这将侦听#mainwrapper内部的任何双击，但仅当DIV元素是目标时才触发处理程序。

您可以使用.on()

 $(".editable").on("dblclick", function(e){
     $(this).attr('class') //Class Name
 });
相关文章：