Img element is being selected instead of the parent div

January 25, 2022

I don’t know why because it works in my other tool bar section but when I check for which element I’m clicking it selects the image rather than the div, which it doesn’t on the main toolbar section.

I was able to fix it by adding a pointer-events: none; to the image’s CSS but it was a hacky way of doing it and I still have no idea what’s causing it.

Thanks in advance!

var pointer_tool_on = true;
var ruler_tool_on = false;
var draw_tool_on = false;
var draw_tool_freehand = true;
var draw_tool_polyline = false;
var draw_tool_circledraw = false;
var draw_tool_squaredraw = false;
document.addEventListener('click', e => {
  console.log(e.target.id);
  switch (e.target.id) {
    case "ruler_id":
      false_all_tools();
      ruler_tool_on = true;
      set_class_tool();
      break;
    case "cursor_tool_id":
      false_all_tools();
      pointer_tool_on = true;
      set_class_tool();
      break;
    case "draw_id":
      false_all_tools();
      draw_tool_on = true;
      set_class_tool();
      break;
    case "del_id":
      clear_canvas();
      break;
    case "freehand":
      document.getElementById("draw_id").src = "../VTT/images/1024px-Circle_-_black_simple.svg.png";
      console.log(e.target.id);
      break;
  }
  return;
});

function false_all_tools() {
  pointer_tool_on = false;
  ruler_tool_on = false;
  draw_tool_on = false;
}

function false_all_tools_sublist() {
  var draw_tool_freehand = false;
  var draw_tool_polyline = false;
  var draw_tool_circledraw = false;
  var draw_tool_squaredraw = false;
}

function set_class_tool() {
  if (ruler_tool_on == true) {
    document.getElementById("ruler_id").setAttribute('class', "elemI2");
  } else {
    document.getElementById("ruler_id").setAttribute('class', "elemI");
  }
  if (pointer_tool_on == true) {
    document.getElementById("cursor_tool_id").setAttribute('class', "elemI2");
  } else {
    document.getElementById("cursor_tool_id").setAttribute('class', "elemI");
  }
  if (draw_tool_on == true) {
    document.getElementById("draw_id").setAttribute('class', "elemI2");
    document.getElementById("color_picker_width").style.visibility = "visible";
    document.getElementById("draw_sub_list").style.visibility = "visible";
  } else {
    document.getElementById("draw_id").setAttribute('class', "elemI");
    document.getElementById("color_picker_width").style.visibility = "hidden";
    document.getElementById("draw_sub_list").style.visibility = "hidden";
  }
}
set_class_tool();

#tool-panel {
  box-shadow: 2px 2px 3px #484848;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  position: fixed;
  top: 55px;
  right: 370px;
  border: 2px solid black;
  background-color: #808080;
  user-select: none;
}

.elem {
  width: 40px;
  height: 40px;
  border-bottom: 1px solid black;
}

.elemI {
  opacity: 0.5;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.elemI:hover {
  background-color: #606060;
  opacity: 1;
}

.elemI2 {
  background-color: #606060;
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#color_picker_width {
  border: 2px solid black;
  box-shadow: 2px 2px 3px #484848;
  padding: 5px;
  background-color: #808080;
  top: 10px;
  right: 370px;
  display: flex;
  flex-direction: row;
  position: fixed;
  z-index: 100;
  visibility: hidden;
}

#draw_sub_list {
  border: 2px solid black;
  box-shadow: 2px 2px 3px #484848;
  right: 50px;
  top: 0px;
  background-color: #808080;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 100;
  visibility: hidden;
  padding: 2px;
}

.draw_sub_list_class {
  padding-top: 2px;
  padding-bottom: 2px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  opacity: 0.5;
  object-fit: contain;
  font-size: 13px;
  font-weight: bold;
  font-family: Sans-serif;
  align-items: center;
  padding-right: 5px;
}

.draw_sub_list_class:hover {
  background-color: #606060;
  opacity: 1;
}

.draw_list_img {
  width: 30px;
  height: 30px;
  padding-right: 25px;
}

<div id="tool-panel">
  <div id="cursor-tool" class="elem">
    <img id="cursor_tool_id" class="elemI" src="../VTT/images/cursor_PNG78.png"></img>
  </div>
  <div id="ruler" class="elem">
    <img id="ruler_id" class="elemI" src="../VTT/images/ruler_PNG78.png"></img>
  </div>
  <div id="draw" class="elem">
    <div id="color_picker_width">
      <input id="color_picker" type="color"></input>
      <input id="color_picker2" type="color"></input>
      <input id="width" type="number" placeholder="Line width"></input>
    </div>
    <img id="draw_id" class="elemI" src="../VTT/images/paint-brush-4127172_960_720.png"></img>
    <div id="draw_sub_list">
      <div id="freehand" class="draw_sub_list_class">
        <img class="draw_list_img" src="../VTT/images/paint-brush-4127172_960_720.png"></img>
        Freehand
      </div>
      <div id="polyline" class="draw_sub_list_class">
        <img class="draw_list_img" src="../VTT/images/194972-200.png"></img>
        Polygon Line
      </div>
      <div id="circle_draw" class="draw_sub_list_class">
        <img class="draw_list_img" src="../VTT/images/1024px-Circle_-_black_simple.svg.png"></img>
        Circle
      </div>
      <div id="square_draw" class="draw_sub_list_class">
        <img class="draw_list_img" src="../VTT/images/Square_-_black_simple.svg.png"></img>
        Square
      </div>
    </div>
  </div>
  <div id="del" class="elem">
    <img id="del_id" class="elemI" src="../VTT/images/trash+bin+icon-1320086460670911435.png"></img>
  </div>
</div>

>Solution :

If your listener is for handling clicks to those specific divs, just set it as such with

document.querySelectorAll('.elem').forEach(elem => elem.addEventListener('click', elemClick));

and for your elemClick handler function, you can access the clicked div with this

function elemClick() {
  console.log(this.id);
  switch(this.id) {
    ...

var pointer_tool_on = true;
var ruler_tool_on = false;
var draw_tool_on = false;
var draw_tool_freehand = true;
var draw_tool_polyline = false;
var draw_tool_circledraw = false;
var draw_tool_squaredraw = false;
function elemClick() {
  console.log(this.id);
  switch (this.id) {
    case "ruler_id":
      false_all_tools();
      ruler_tool_on = true;
      set_class_tool();
      break;
    case "cursor_tool_id":
      false_all_tools();
      pointer_tool_on = true;
      set_class_tool();
      break;
    case "draw_id":
      false_all_tools();
      draw_tool_on = true;
      set_class_tool();
      break;
    case "del_id":
      clear_canvas();
      break;
    case "freehand":
      document.getElementById("draw_id").src = "../VTT/images/1024px-Circle_-_black_simple.svg.png";
      console.log(e.target.id);
      break;
  }
  return;
}

document.querySelectorAll('.elem').forEach(elem => elem.addEventListener('click', elemClick));

function false_all_tools() {
  pointer_tool_on = false;
  ruler_tool_on = false;
  draw_tool_on = false;
}

function false_all_tools_sublist() {
  var draw_tool_freehand = false;
  var draw_tool_polyline = false;
  var draw_tool_circledraw = false;
  var draw_tool_squaredraw = false;
}

function set_class_tool() {
  if (ruler_tool_on == true) {
    document.getElementById("ruler_id").setAttribute('class', "elemI2");
  } else {
    document.getElementById("ruler_id").setAttribute('class', "elemI");
  }
  if (pointer_tool_on == true) {
    document.getElementById("cursor_tool_id").setAttribute('class', "elemI2");
  } else {
    document.getElementById("cursor_tool_id").setAttribute('class', "elemI");
  }
  if (draw_tool_on == true) {
    document.getElementById("draw_id").setAttribute('class', "elemI2");
    document.getElementById("color_picker_width").style.visibility = "visible";
    document.getElementById("draw_sub_list").style.visibility = "visible";
  } else {
    document.getElementById("draw_id").setAttribute('class', "elemI");
    document.getElementById("color_picker_width").style.visibility = "hidden";
    document.getElementById("draw_sub_list").style.visibility = "hidden";
  }
}
set_class_tool();

#tool-panel {
  box-shadow: 2px 2px 3px #484848;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  position: fixed;
  top: 55px;
  right: 370px;
  border: 2px solid black;
  background-color: #808080;
  user-select: none;
}

.elem {
  width: 40px;
  height: 40px;
  border-bottom: 1px solid black;
}

.elemI {
  opacity: 0.5;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.elemI:hover {
  background-color: #606060;
  opacity: 1;
}

.elemI2 {
  background-color: #606060;
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#color_picker_width {
  border: 2px solid black;
  box-shadow: 2px 2px 3px #484848;
  padding: 5px;
  background-color: #808080;
  top: 10px;
  right: 370px;
  display: flex;
  flex-direction: row;
  position: fixed;
  z-index: 100;
  visibility: hidden;
}

#draw_sub_list {
  border: 2px solid black;
  box-shadow: 2px 2px 3px #484848;
  right: 50px;
  top: 0px;
  background-color: #808080;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 100;
  visibility: hidden;
  padding: 2px;
}

.draw_sub_list_class {
  padding-top: 2px;
  padding-bottom: 2px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  opacity: 0.5;
  object-fit: contain;
  font-size: 13px;
  font-weight: bold;
  font-family: Sans-serif;
  align-items: center;
  padding-right: 5px;
}

.draw_sub_list_class:hover {
  background-color: #606060;
  opacity: 1;
}

.draw_list_img {
  width: 30px;
  height: 30px;
  padding-right: 25px;
}

<div id="tool-panel">
  <div id="cursor-tool" class="elem">
    <img id="cursor_tool_id" class="elemI" src="../VTT/images/cursor_PNG78.png"></img>
  </div>
  <div id="ruler" class="elem">
    <img id="ruler_id" class="elemI" src="../VTT/images/ruler_PNG78.png"></img>
  </div>
  <div id="draw" class="elem">
    <div id="color_picker_width">
      <input id="color_picker" type="color"></input>
      <input id="color_picker2" type="color"></input>
      <input id="width" type="number" placeholder="Line width"></input>
    </div>
    <img id="draw_id" class="elemI" src="../VTT/images/paint-brush-4127172_960_720.png"></img>
    <div id="draw_sub_list">
      <div id="freehand" class="draw_sub_list_class">
        <img class="draw_list_img" src="../VTT/images/paint-brush-4127172_960_720.png"></img>
        Freehand
      </div>
      <div id="polyline" class="draw_sub_list_class">
        <img class="draw_list_img" src="../VTT/images/194972-200.png"></img>
        Polygon Line
      </div>
      <div id="circle_draw" class="draw_sub_list_class">
        <img class="draw_list_img" src="../VTT/images/1024px-Circle_-_black_simple.svg.png"></img>
        Circle
      </div>
      <div id="square_draw" class="draw_sub_list_class">
        <img class="draw_list_img" src="../VTT/images/Square_-_black_simple.svg.png"></img>
        Square
      </div>
    </div>
  </div>
  <div id="del" class="elem">
    <img id="del_id" class="elemI" src="../VTT/images/trash+bin+icon-1320086460670911435.png"></img>
  </div>
</div>