Chỉ nhắm mục tiêu phụ huynh với event.target?

Question

HTML:

<div onclick="doSomething()" id="parent"> 
    <div id="child"></div> 
</div> 

CSS:

#parent { 
    background-color: blue; 
    width: 100%; 
    height: 100px; 
} 

#child { 
    background-color: green; 
    width: 50%; 
    height: inherit; 
} 

.myClass { 
    background-color: red !important; 
} 

JS:

function doSomething() { 
    event.target.className = ('myClass'); 
} 

Như bạn có thể thấy trong this JSFIDDLE, khi nhấn vào đứa trẻ, thay vì áp dụng các lớp để phụ huynh mà kích hoạt chức năng, nó áp dụng nó cho đứa trẻ. Tôi muốn biết làm thế nào để tránh điều này và áp dụng nó cho phụ huynh không có vấn đề mà tôi nhấp vào bên trong của nó. Tôi đang cố tránh sử dụng phương thức document.getElement(s)ByClass/Id.
Bất kỳ trợ giúp nào?

Answer 1

Bạn có thể tham khảo phần tử xử lý sự kiện với currentTarget.

Xác định mục tiêu hiện tại cho sự kiện khi sự kiện đi qua DOM. Nó luôn đề cập đến phần tử mà trình xử lý sự kiện đã được gắn với trái ngược với event.target xác định phần tử mà sự kiện xảy ra.

---

Tuy nhiên, thay vì dựa vào trình duyệt để cung cấp một đối tượng event toàn cầu, tôi sẽ vượt qua nó để chức năng:

onclick="doSomething(event)" 

Bạn cũng có thể tham khảo các phần tử xử lý là ràng buộc đến với this:

onclick="doSomething(event, this)" 

Tất nhiên, hãy xem xét not use inline event handlers.

Answer 2

Chỉ cần tham khảo các target trong cuộc gọi javascript của bạn:

function doSomething(target) { 
 
\t target.className = ('myClass'); 
 
}

#parent { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
#child { 
 
    background-color: green; 
 
    width: 50%; 
 
    height: inherit; 
 
} 
 

 
.myClass { 
 
    background-color: red !important; 
 
}

<div onclick="doSomething(this)" id="parent"> 
 
    <div id="child"></div> 
 
</div>

Answer 3

Nếu bạn sử dụng addEventListener để xử lý các sự kiện thay vì phiên bản nội tuyến, thì this của callback sẽ trỏ đến yếu tố sự kiện đã được khai báo trên (#parent) - fiddle:

<div id="parent"> 
    <div id="child"></div> 
</div> 

Đặt mã này vào cuối của cơ thể hoặc trong DOMContentLoaded xử lý sự kiện:

function doSomething() { 
    this.className = 'myClass'; 
} 

document.getElementById('parent').addEventListener('click', doSomething); 

Answer 4

Để có được yếu tố phụ huynh ngay lập tức của phần tử nhấp bạn có thể sử dụng các mảng 'con đường' của sự kiện. Đường dẫn cung cấp một mảng bao gồm mọi phần tử theo thứ tự tăng dần từ phần tử bạn đã nhấp vào đầu DOM.

Gặp sự cố khi tìm ra hỗ trợ chính xác cho trình duyệt này.

var children = document.querySelectorAll('[id^="child-"]'), 
 
    clickEvent = function(event) { 
 
    console.log(event.path[0]); //prints clicked child element 
 
    console.log(event.path[1]); //prints parent 
 

 
    event.path[1].classList.toggle('row'); //toggles row or column mode of parent 
 
    event.path[0].classList.toggle('selected'); //toggles color of child 
 
    }; 
 

 
children.forEach(function(child) { 
 
    child.addEventListener('click', clickEvent); 
 
});

<div id="parent"> 
 
    <div id="child-1">Child One</div> 
 
    <div id="child-2">Child Two</div> 
 
    <div id="child-3">Child Three</div> 
 
    <div id="child-4">Child Four</div> 
 
    <div id="child-5">Child Five</div> 
 
</div>