Detect if I'm clicking an element within an element

Question

I have an element (let's say div with id "Test") with a set height and width. Randomly placed within this element are other (smaller) elements (let's say id's "inner1","inner2","inner3"), but there is also whitespace, space where no elements are. I would like to have a function that fires upon clicking the main element, but then detect wether i'm clicking whitespace, or if not, clicking an inner element and if so, return the id of the inner element.

Oh and the inner elements are dynamically generated so i don't know the id's before hand, i do know they are either div's or spans... (just as example as well, but i will have multiple types of elements).

Thanks everyone.

EDIT: (since thank you Xotic750 for reminding me to post what i mean :))

I haven't tried much since i have no idea how to call detect an inner click through the javascript..

but here is an example:

<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/

What have you tried so far? Do you have any HTML and CSS that you can provide as an example? — Xotic750, Jun 17 '13 at 21:42

Xotic750 · Accepted Answer · 2017-08-04T14:13:05.830

I think this is what you mean?

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>

Exactly what i need! much obliged!! – Tobias Hagenbeek Jun 17 '13 at 22:16 — Tobias Hagenbeek, Jun 17 '13 at 22:16

score 2 · Answer 2 · 2013-06-17T22:59:34.573

2

Add an onClick handler to your Test div and use event bubbling to trap clicks on the inner elements. You can extract the clicked element from the event object.

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!");

}

edited Jun 17 '13 at 22:59

answered Jun 17 '13 at 22:00

worked as well, although i don't get the id, but a DOM object so it would take more steps to get what i need, still thanks!! – Tobias Hagenbeek Jun 17 '13 at 22:22
1

It's essentially the same as Xotic's answer, just arrived at by a slightly different route. I've added an extra line to extract the id. – Jun 17 '13 at 22:58

Detect if I'm clicking an element within an element

2 Answers2

Linked