在DOM中双击哪个HTML元素

我想检测哪个HTML元素被双击。似乎有些东西在我的代码中不起作用。以下是我的HTML代码结构，您可以双击检测哪个项目被点击。在DOM中双击哪个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" 
}

来源

2012-02-10 user1201670

您在事件处理程序附加到DOM，你想这样做的具体的成分？ – 2012-02-10 09:57:09

我不确定你到底想干什么。这是人们可以编辑的东西吗？我试图将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，甚至可以遍历所有可编辑的元素，并将它们与传递给你的元素进行比较。一旦你匹配了，你就知道哪个元素被点击了。

来源

2012-02-10 09:58:26

为什么添加多个听众而不是单个事件委派到像海报那样的文档？那会解决什么？事件代表团似乎更有效率。 – David 2012-02-10 10:15:56

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

您可以委派事件到document和检测使用jQuery使用on()功能的整个文档中的所有双击：

$(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要素是目标。

来源

2012-02-10 10:03:59 David

您可以使用.on()

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

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

});

来源

2012-02-10 10:04:38

'live（）'已弃用，请使用'on（）'代替。 – David 2012-02-10 10:10:24

在DOM中双击哪个HTML元素

回答

相关问题