Home > Net >  Img element is being selected instead of the parent div
Img element is being selected instead of the parent div

Time：01-26

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" >
    <img id="cursor_tool_id"  src="../VTT/images/cursor_PNG78.png"></img>
  </div>
  <div id="ruler" >
    <img id="ruler_id"  src="../VTT/images/ruler_PNG78.png"></img>
  </div>
  <div id="draw" >
    <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"  src="../VTT/images/paint-brush-4127172_960_720.png"></img>
    <div id="draw_sub_list">
      <div id="freehand" >
        <img  src="../VTT/images/paint-brush-4127172_960_720.png"></img>
        Freehand
      </div>
      <div id="polyline" >
        <img  src="../VTT/images/194972-200.png"></img>
        Polygon Line
      </div>
      <div id="circle_draw" >
        <img  src="../VTT/images/1024px-Circle_-_black_simple.svg.png"></img>
        Circle
      </div>
      <div id="square_draw" >
        <img  src="../VTT/images/Square_-_black_simple.svg.png"></img>
        Square
      </div>
    </div>
  </div>
  <div id="del" >
    <img id="del_id"  src="../VTT/images/trash bin icon-1320086460670911435.png"></img>
  </div>
</div>

CodePudding user response：

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" >
    <img id="cursor_tool_id"  src="../VTT/images/cursor_PNG78.png"></img>
  </div>
  <div id="ruler" >
    <img id="ruler_id"  src="../VTT/images/ruler_PNG78.png"></img>
  </div>
  <div id="draw" >
    <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"  src="../VTT/images/paint-brush-4127172_960_720.png"></img>
    <div id="draw_sub_list">
      <div id="freehand" >
        <img  src="../VTT/images/paint-brush-4127172_960_720.png"></img>
        Freehand
      </div>
      <div id="polyline" >
        <img  src="../VTT/images/194972-200.png"></img>
        Polygon Line
      </div>
      <div id="circle_draw" >
        <img  src="../VTT/images/1024px-Circle_-_black_simple.svg.png"></img>
        Circle
      </div>
      <div id="square_draw" >
        <img  src="../VTT/images/Square_-_black_simple.svg.png"></img>
        Square
      </div>
    </div>
  </div>
  <div id="del" >
    <img id="del_id"  src="../VTT/images/trash bin icon-1320086460670911435.png"></img>
  </div>
</div>

CodePudding user response：

e.target is the most deeply nested element that you clicked on.

If you want to get something intermediate, you need to add the event listener to the elements directly, and then use e.currentTarget to get the element that the listener was bound to.

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.querySelectorAll(".elem").forEach(el => el.addEventListener('click', e => {
  console.log(e.currentTarget.id);
  switch (e.currentTarget.id) {
    case "ruler":
      false_all_tools();
      ruler_tool_on = true;
      set_class_tool();
      break;
    case "cursor-tool":
      false_all_tools();
      pointer_tool_on = true;
      set_class_tool();
      break;
    case "draw":
      false_all_tools();
      draw_tool_on = true;
      set_class_tool();
      break;
    case "del":
      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" >
    <img id="cursor_tool_id"  src="../VTT/images/cursor_PNG78.png"></img>
  </div>
  <div id="ruler" >
    <img id="ruler_id"  src="../VTT/images/ruler_PNG78.png"></img>
  </div>
  <div id="draw" >
    <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"  src="../VTT/images/paint-brush-4127172_960_720.png"></img>
    <div id="draw_sub_list">
      <div id="freehand" >
        <img  src="../VTT/images/paint-brush-4127172_960_720.png"></img>
        Freehand
      </div>
      <div id="polyline" >
        <img  src="../VTT/images/194972-200.png"></img>
        Polygon Line
      </div>
      <div id="circle_draw" >
        <img  src="../VTT/images/1024px-Circle_-_black_simple.svg.png"></img>
        Circle
      </div>
      <div id="square_draw" >
        <img  src="../VTT/images/Square_-_black_simple.svg.png"></img>
        Square
      </div>
    </div>
  </div>
  <div id="del" >
    <img id="del_id"  src="../VTT/images/trash bin icon-1320086460670911435.png"></img>
  </div>
</div>

Page link：https//www.codepudding.com/net/276587.html

Prev:passing data to function and using it node.js sql
Next:typescript error:2339. how can I use multiple types of object in one variable?
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding