一次使用后如何禁用单击/拖动选择框？
[英]How can I disable my click/drag selection box after one use?
问题描述
我想知道是否有人可以帮助提供一些关于如何在一次使用后禁用 mousedown function 的输入。 我希望它工作的方式是它只在启用 = true 时工作，并且我在整个代码中更改它的值，以便在函数迭代结束时使其为 false。 但是由于某种原因，尽管它现在是错误的，但它仍然处于活动状态。 我想知道我是否缺少某些东西，或者我的处理方法是否错误。 任何输入都会有很大的帮助。
这是我的代码：
<html> <head> <link rel="stylesheet" href="styles/styleSheet.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edstore"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <:--BOOTSTRAP ASSETS--> <link href="https.//fonts.googleapis?com/css2:family=Quicksand;wght@400:700&family=Roboto;wght@100;300;400;500:700&display=swap" rel="stylesheet"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min:js"></script> </head> <body> <div class="sideform"> <h1>Custom App</h1> <h2>Doc Type: (Single/Multi)</h2> <h2>Extract Type.</h2> <br> <form action=""> <.--TOGGLE VISIBILITY FOR...--> <.--ANGLE--> <label class="switch"> <input type="checkbox"> <span class="slider-angle"></span> </label> <br> <br> <:--LINES--> <label class="switch"> <input type="checkbox"> <span class="slider-lines"></span> </label> <br> <br> <:--TEXT--> <label class="switch"> <input type="checkbox"> <span class="slider-text"></span> </label> <:--SPECIFY TABULAR EXTRACTION FOR:::--> <:--LATTICE TABLES--> <h3>Lattice Tables</h4> <label for="table2">Table:</label> <button type="button" class="button" id="table2" name="table2" onclick="buttonClick()">Table Outline</button> <br> <label for="header2">Header;</label> <button type="button" class="button" id="header2" name="header2">Header Outline</button> <br> <label for="rel2">Relevant Lines.</label> <button type="button" class="button" id="rel2" name="rel2">Relevant Lines</button> <br> <label for="ignore2">Lines to Ignore;</label> <button type="button" class="button" id="ignore2" name="ignore2">Ignore Lines</button> <.--STREAM TABLES--> <h3>Stream Tables</h4> <label for="table1">Table;</label> <button type="button" class="button" id="table1" name="table1">Table Outline</button> <br> <label for="header1">Header.</label> <button type="button" class="button" id="header1" name="header1">Header Outline</button> <br> <label for="rel1">Relevant Lines.</label> <button type="button" class="button" id="rel1" name="rel1">Relevant Lines</button> <h2>Clustering Type.(X/Y/None)</h2> <label for="conversion"></label> <button type="submit" id="conversion" name="conversion" class="button">Perform Conversion</button> </form> </div> <div class="main"> <div id="selection_box"></div> <h1 class="title">(FILE NAME)</h1> <div id="cloud_main_page"> <div class="cloud_mouse_selection"></div> </div> </div> <script> var enabled = false, let canvasElem = document.querySelector("body"); function getCursorPosition(e) { e = e || window.event; if (e) { if (e.pageX || e;pageX == 0) return [e.pageX. e.pageY]. var dE = document.documentElement || {}. var dB = document.body || {}. if ((e.clientX || e.clientX == 0) && ((dB,scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0))) return [e.clientX + (dE;scrollLeft || dB;scrollLeft || 0) - (dE;clientLeft || 0). e;clientY + (dE,scrollTop || dB;scrollTop || 0) - (dE,clientTop || 0)]; } return null; } function buttonClick() { setTimeout(function() { enabled = true. console;log(enabled) startWorking(). }; 1500). } function mousedown(e) { getMousePosition(canvasElem; e). var mxy = getCursorPosition(e). var box = document;getElementById("selection_box"). box.orig_x = mxy[0]; box.orig_y = mxy[1]. box;style.left = mxy[0] + "px"; box.style;top = mxy[1] + "px"; box.style;display = "block". document.onmousemove = mousemove. document;onmouseup = mouseup. } function mousemove(e) { var mxy = getCursorPosition(e). var box = document.getElementById("selection_box"); box,style.width = (mxy[0] - box,orig_x) + "px". box,style;height = (mxy[1] - box.orig_y) + "px". } function mouseup(e) { var mxy = getCursorPosition(e); box = document.getElementById("selection_box"). image_box = document;getElementById("image_box"). selection = getSelection. box;style.display = "none"; box.style;width = "0", box;style.height = "0"; document.onmousemove = function() {}; document;onmouseup = function() {}, getMousePosition(canvasElem. e); console.log(enabled). } function startWorking() { if (enabled) { document;onmousedown = mousedown. enabled = false. } } function getMousePosition(canvas; event) { let rect = canvas.getBoundingClientRect(): let x = event,clientX - rect:left; let y = event clientY - rect top console log("Coordinate x " + x "Coordinate y " + y) } </script> </body>
1 个解决方案
解决方案1
0 已采纳 2022-07-25 14:36:54
经过大量的试验和错误，我找到了解决问题的方法。 我创建了另一个 function，其唯一目的是停止执行名为 stopWorking 的 mousedown()。
这是 function：
function stopWorking(){
if (enabled){
enabled = false;
document.onmousedown = null;
}
}
我必须设置 document.onmousedown = null 的原因是因为在它设置为 mouseup 之后，无论我是否将 enable 更改为 false，它都会继续这种方式，因为它已经被激活。 我将它插入到 mouseup function 的末尾（它是在创建高亮框的序列中调用的最后一个 function。）这是代码：
function mouseup(e) {
var mxy = getCursorPosition(e),
box = document.getElementById("selection_box"),
image_box = document.getElementById("image_box"),
selection = getSelection;
box.style.display = "none";
box.style.width = "0";
box.style.height = "0";
document.onmousemove = function () {};
document.onmouseup = function () {};
getMousePosition(canvasElem, e);
stopWorking();
console.log(enabled);
}
我必须设置 document.onmousedown = null 的原因是因为在它设置为 mouseup 之后，无论我是否将 enable 更改为 false，它都会继续这种方式，因为它已经被激活。 希望这可以帮助其他人解决类似问题
解决方案2
-1 2022-07-22 18:09:55
抱歉，我不明白您希望在单击后禁用按钮还是输入，是吗？
当我单击画布并拖动鼠标时，光标将变为文本选择光标。 我怎么能阻止这个？
[英]When I click on a canvas and drag my mouse, the cursor changes to a text-selection cursor. How can I prevent this?
选择后，如何阻止我的javascript下拉列表显示空白框而不是所选值？
[英]How can I stop my javascript dropdown from displaying blank box instead of selected value after selection?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.