改變事件目標

Question

我有以下的html：

<div id="div1"> 
    <div id="div2"> 
    </div> 
</div> 

JS：

document.addEventListener('mousedown', function(e){ 
    console.log(e.target); 
}); 

如果鼠標點擊DIV2，然後e.target是DIV2。在這種情況下，我希望目標是div1。可能嗎？

Answer 1

最簡單的方法可能是向上走DOM樹，直到找到所需的元素。

document.addEventListener('mousedown', function(e) { 

    // start with the element that was clicked. 
    var parent = e.target; 

    // loop while a parent exists, and it's not yet what we are looking for. 
    while (parent && parent.id !== 'div1') { 

     // We didn't find anything yet, so snag the next parent. 
     parent = parent.parentElement; 
    } 

    // When the loop exits, we either found the element we want, 
    // or we ran out of parents. 
    console.log(parent); 
});​ 

例子：http://jsfiddle.net/7kYJn/

Answer 2

在DOM中，您可以指定附加的事件監聽到的元素：

var div1 = document.getElementById('div1'); 
div1.addEventListener('mousedown',function(e){ 
    console.log(e.target); 
});