事件代表團：在元素不是其子

Question

HTML

<section id='mainwrap'> 
    .. 
    .... 
    ...... 
    <section class='innerwrap'> 
    <div>123</div> 
    <div>123</div> 
    <div>123</div> 
    <div>123</div> 
    <div>123</div> 
    <div>123</div> 
    <div>123</div> 
    </section> 
..... 
.... 
... 
</section> 

這裏部分包裹物在應用程序動態添加捕事件。我已將一個活動委託給 主包裹部分（這是靜態的）。

提問：我無法到風風火火的部分內包裹 click事件 ........而不是每次元素越來越點擊是它的孩子申報單。

JS

document.getElementById('mainwrap').addEventListener('click',handler,false); 
 

 
function handler(e){ 
 
    event = e || window.event; 
 
    var target = e.target || e.scrElement; 
 
    var cls = target.className; 
 
    
 
    
 
    console.log(target,cls); 
 
    if(cls === 'innerwrap'){ 
 
    console.log('my right element clicked'); 
 
    } 
 
    
 
} 
 

.innerwrap{ 
 
    border:2px solid #ddd; 
 
    position:relative; 
 
    z-index:1; 
 
    display:inline-block; 
 
} 
 

 
.innerwrap > div{ 
 
    border:1px solid #efefef; 
 
    position:relative; 
 
    z-index:0; 
 
    display:inline-block; 
 
    margin-right:-4px; 
 
}

<section id='mainwrap'> 
 
    <section class='innerwrap'> 
 
    <div>123</div> 
 
    <div>123</div> 
 
    <div>123</div> 
 
    <div>123</div> 
 
    <div>123</div> 
 
    <div>123</div> 
 
    <div>123</div> 
 
    </section> 
 
</section>

Answer 1

需要爬上文檔樹，直到找到合適的元素：

document.getElementById('mainwrap').addEventListener('click',handler,false); 

function handler(e){ 
    e = e || window.event; 
    var element = e.target || e.srcElement; 

    while (element.className !== "innerwrap" && element !== this) { 
    element = element.parentNode; 
    } 

    if(element.className === 'innerwrap'){ 
    console.log('my right element clicked'); 
    } 
} 

event.target屬性始終是點擊最深的元素，因此您只需要繼續查看parentNode s，直到找到合適的元素。

Answer 2

試試這個：

if(cls === 'innerwrap'){ 
     console.log('my right element clicked'); 
    }else{ 
    if(target.id === "mainwrap"){ 
     console.log('Ooops wrong div!'); 
    }else{ 
     target.parentNode.click(); 
    } 
    } 

Answer 3

你可以添加一個事件處理程序，你居然要接收事件（如果這是feasable在你的設置）每個容器：

（地方:)

(function() { 
var container = document.getElementById('mainwrap'); 
container.addEventListener('click',handler,false); 

function handler(e) { 
    e = e || window.event; 
    var element = e.target || e.srcElement; 

    console.log("Element actually clicked: ", element); 
    console.log("Container receiving event: ", container); 
} 

})(); 

或者擴大到（可以註冊多個容器處理..）：

function registerHandlerForContainer(container_id, handler) { 
var container = document.getElementById(container_id); 
container.addEventListener('click',delegating_handler,false); 

function delegating_handler(e) { 
    handler(container, e); 
} 
} 

function handler(container, e) { 
    e = e || window.event; 
    var element = e.target || e.srcElement; 

    console.log("Element actually clicked: ", element); 
    console.log("Container receiving event: ", container); 
} 

registerHandlerForContainer('mainwrap', handler); 

如果我在HTML只包裹物