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，甚至可以遍历所有可编辑元素，并将它们与传递给您的元素进行比较。一旦匹配，就可以准确地知道点击了哪个元素。

Answer 2

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

您可以使用on()函数将事件委托给document并使用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元素是目标时才会触发处理程序。

Answer 3

您可以使用.on()

 $(".editable").on("dblclick", function(e){

     $(this).attr('class') //Class Name

 });

在DOM中双击哪个HTML元素

3 个答案: