Phát hiện nếu tôi đang nhấp vào một phần tử trong một phần tử

Question

Tôi có một phần tử (giả sử div có id "Kiểm tra") có chiều cao và chiều rộng được đặt. Đặt ngẫu nhiên trong phần tử này là các phần tử (nhỏ hơn) khác (giả sử là "inner1", "inner2", "inner3"), nhưng cũng có khoảng trắng, khoảng trắng không có phần tử nào. Tôi muốn có một chức năng kích hoạt khi nhấp vào phần tử chính, nhưng sau đó phát hiện thời tiết tôi đang nhấp vào khoảng trống hoặc nếu không, hãy nhấp vào phần tử bên trong và nếu có, hãy trả về id của phần tử bên trong. Oh và các yếu tố bên trong được tạo động vì vậy tôi không biết các id trước khi bàn tay, tôi biết họ là div hoặc kéo dài ... (cũng giống như ví dụ là tốt, nhưng tôi sẽ có nhiều loại yếu tố).

Cảm ơn mọi người.

EDIT: (từ cảm ơn bạn Xotic750 cho nhắc tôi đăng những gì tôi có nghĩa :))

tôi đã không cố gắng nhiều kể từ khi tôi không có ý tưởng làm thế nào để gọi phát hiện một nhấp chuột bên trong thông qua javascript ..

nhưng đây là một ví dụ:

<div id="test"> 
    <div id="inner1"></div> 
    <span id="inner2"></span> 
    <div id="inner3"></div> 
</div> 
<style> 
div#test { 
    width:300px; 
    height:400px; 
    position:relative; 
    display:block; 
    border:1px solid blue; 
} 
div#test div, div#test span { 
    display:block; 
    position:absolute; 
    border:1px solid red; 
} 
div#inner1 { 
    top:15px; 
    left:15px; 
    height:15px; 
    width:15px; 
} 
span#inner2 { 
    top:65px; 
    left:65px; 
    height:15px; 
    width:15px; 
} 
div#inner3 { 
    top:155px; 
    left:155px; 
    height:15px; 
    width:15px; 
} 
</style> 

http://jsfiddle.net/BgbRy/2/

Answer 1

tôi nghĩ rằng đây là những gì bạn nghĩa là gì?

var test = document.getElementById('test'); 
 

 
function whatClicked(evt) { 
 
    alert(evt.target.id); 
 
} 
 

 
test.addEventListener("click", whatClicked, false);

div#test { 
 
    width: 300px; 
 
    height: 200px; 
 
    position: relative; 
 
    display: block; 
 
    border: 1px solid blue; 
 
} 
 

 
div#test div, 
 
div#test span { 
 
    display: block; 
 
    position: absolute; 
 
    border: 1px solid red; 
 
} 
 

 
div#inner1 { 
 
    top: 15px; 
 
    left: 15px; 
 
    height: 15px; 
 
    width: 15px; 
 
} 
 

 
span#inner2 { 
 
    top: 65px; 
 
    left: 65px; 
 
    height: 15px; 
 
    width: 15px; 
 
} 
 

 
div#inner3 { 
 
    top: 155px; 
 
    left: 155px; 
 
    height: 15px; 
 
    width: 15px; 
 
}

<div id="test"> 
 
    <div id="inner1"></div> 
 
    <span id="inner2"></span> 
 
    <div id="inner3"></div> 
 
</div>

Answer 2

Thêm một handler onClick để thử nghiệm div của bạn và sử dụng sự kiện bọt để nhấp chuột bẫy trên các yếu tố nội tại. Bạn có thể trích xuất phần tử được nhấp từ đối tượng sự kiện.

document.getElementById("Test").onclick = function(e) { 
    e = e || event 
var target = e.target || e.srcElement 
// variable target has your clicked element 
    innerId = target.id; 
    // do your stuff here. 
    alert("Clicked!"); 

}