Question

我的按钮可以移动，但奇怪的是，我无法弄清楚偏移是否有问题。

我希望我的按钮能够用我的鼠标光标移动，但现在它的移动方式不是我想要的，有时会消失。

此外，创建的新按钮是重叠的，我不知道如何解决这个问题并且看起来更漂亮。

＆＃13;

var coorA;
var coorB;
var btn = null;

function mousedown() {
    if (event.target.tagName === "BUTTON") {
        btn = event.target;
        coorA = btn.offsetTop;
        coorB = btn.offsetLeft;
    }
}

function mouseup() {
    btn = null;
}

function mousemove() {
    if (btn !== null) {
        btn.style.top = (event.clientY - coorA) + "px";
        btn.style.left = (event.clientX - coorB) + "px";
    }
}

function createButton() {
    var button = document.createElement("BUTTON");
    var msg = document.getElementById("word").value;
    if (msg.length > 0) {
        var t = document.createTextNode(msg);
        button.appendChild(t);
        document.body.appendChild(button);
    }
    document.getElementById("word").value = "";
}
document.getElementsByTagName("body")[0].addEventListener("mousedown", mousedown);
document.getElementsByTagName("body")[0].addEventListener("mousemove", mousemove);
document.getElementsByTagName("body")[0].addEventListener("mouseup", mouseup);

＆＃13;

body {
    background-color: black;
}
#word {
    padding: 10px 30px;
    font-size: 14px;
}

button {
    position: absolute;
    background-color: #e7e7e7;
    color: #000;
    font-weight: 700;
    padding: 10px 30px;
    font-size: 14px;
    border: 1px solid gray;
}

#add {
    position: relative;
    background-color: #e7e7e7;
    color: #000;
    font-weight: 700;
    padding: 10px 30px;
    font-size: 14px;
}

＆＃13;

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Poetry-yuc217</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        

    </head>
    <body>
        <div>
            <form>
                <input id = "word" type = "text" name = "word">
                <input id = "add" type = "button" value = "Add Word" onclick = "createButton()">
                <br>
                
            </form>
            <button type="button" >this</button>
               

        </div>


        
   

enter code here
    </body>
</html>

＆＃13;

Answer 1

在评论中回答你的问题：

非常感谢！我仍然对实际的“事件”感到困惑是指。根据我的经验，事件是页面上的所有操作。那还不是那么清楚......

在您的代码中，您引用了event对象，但未将其作为参数传递。我相信你的困惑可能源于此。好吧，我自己很好奇，哦，小伙子，我去了兔子洞......

我会尽量做到这么简单。我尽我所能，因为我自己已经完全理解了这一点。

好的，所以浏览器中有不同类型的事件。您可能知道一些标准的，例如“click”，onload“，”keydown“等。如果您希望代码在发生此类事件时执行某些操作，您将选择一个DOM元素，例如<button> ，{{1>}等（一般来说，因为还有非DOM相关事件，你可以在这里阅读所有关于它的https://developer.mozilla.org/en-US/docs/Web/Events）。然后你将这个元素附加到一个函数当触发所述事件时将调用。

有不同的方法来附加这样的功能（BTW也称为事件处理程序或事件侦听器）。附加事件处理程序时，正在实现一个名为 EventListener接口的东西。通过事件触发的函数将获得一个参数，一个Event对象，由接口提供（https://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-event-handler）。

BUT !!!如果使用内联方法附加事件，即<div>，只有在函数内部写入“event”，即<a onclick="myFunc();" />时，函数才会收到参数（event）。

你可以在这个JSFiddle中观察这种奇怪的行为和不同类型的事件：

https://jsfiddle.net/duwed8kg/

我不确定为什么会这样，但对于新问题来说，这是一个非常好的主题。

PS，关于你的代码和主要问题（我只提供了代码，没有解释） - 它有不同的问题（内联事件附加，通过标记名称选择元素），我专注通过对代码/样式的最小更改来解决您的问题，但请注意它。

<a onclick="myFunc(event);" />

var coorA;
var coorB;
var btn = null;
var lastMouseX;
var lastMouseY;

function mousedown() {
    if (event.target.className.indexOf("listButton") > -1) {
        btn = event.target;
        if(btn.style.top === "" || btn.style.left === "") {
          btn.style.position = "absolute";
          btn.style.top = btn.offsetTop + "px";
          btn.style.left = btn.offsetLeft + "px";
        }
        coorA = btn.offsetTop;
        coorB = btn.offsetLeft;
    }
}

function mouseup() {
    btn = null;
}

function mousemove() {
    if (btn !== null) {
        btn.style.top = parseInt(btn.style.top) + (event.clientY - lastMouseY) + "px";
        btn.style.left = parseInt(btn.style.left) + (event.clientX - lastMouseX) + "px";
    }
    lastMouseX = event.clientX;
    lastMouseY = event.clientY;
}

function createButton() {
    var button = document.createElement("BUTTON");
    var msg = document.getElementById("word").value;
    if (msg.length > 0) {
        var t = document.createTextNode(msg);
        button.appendChild(t);
        button.classList.add("listButton");
        document.getElementsByClassName("container")[0].appendChild(button);
    }
    document.getElementById("word").value = "";
}
document.getElementsByTagName("body")[0].addEventListener("mousedown", mousedown);
document.getElementsByTagName("body")[0].addEventListener("mousemove", mousemove);
document.getElementsByTagName("body")[0].addEventListener("mouseup", mouseup);
document.getElementById("add").addEventListener("click", createButton);

body {
    background-color: black;
}

.container {
  position:relative;
  height:1000px;
}

#word {
    padding: 10px 30px;
    font-size: 14px;
}

button {
    background-color: #e7e7e7;
    color: #000;
    font-weight: 700;
    padding: 10px 30px;
    font-size: 14px;
    border: 1px solid gray;
}

.listButton {
    margin-right: 5px;
    margin-top: 5px;
    float: left;
}
#add {
    position: relative;
    background-color: #e7e7e7;
    color: #000;
    font-weight: 700;
    padding: 10px 30px;
    font-size: 14px;
}

Answer 2

要修复重叠，请创建一个无序列表，然后将<li><button type="button" >fieldValue</button></li>附加到无序列表中。

<ul id="buttonList">
     <li><button type="button" >this</button></li>
     <li><button type="button" >that</button></li>
     <li><button type="button" >the other</button></li>
</ul>

至于我无法复制的移动按钮，它们有一些滞后但它们对我来说很好，也许如果你需要额外的帮助，你可以使用jsfiddle准备一个演示。

使用JavaScript

2 个答案: