我不知道為什么,因為它在我的其他工具列部分有效,但是當我檢查我單擊的元素時,它會選擇影像而不是 div,它不在主工具列部分上。
我可以通過添加指標事件來修復它:無;到影像的 CSS,但這是一種 hacky 方式,我仍然不知道是什么原因造成的。
提前致謝!
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>
uj5u.com熱心網友回復:
如果您的偵聽器用于處理對這些特定divs 的點擊,只需將其設定為
document.querySelectorAll('.elem').forEach(elem => elem.addEventListener('click', elemClick));
對于您的elemClick處理程式函式,您可以使用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>
uj5u.com熱心網友回復:
e.target是您單擊的嵌套最深的元素。
如果你想得到一些中間的東西,你需要將事件監聽器直接添加到元素中,然后使用e.currentTarget來獲取監聽器系結到的元素。
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" 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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/421417.html
標籤:
