个人中心
gpt4 book ai didi

javascript - 使用 JavaScript 在页面上移动按钮

转载 作者：搜寻专家 更新时间：2023-10-31 23:23:15 25 4
gpt4 key购买 nike

我的按钮可以移动，但奇怪的是，我不知道是不是偏移有问题。

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

此外，创建的新按钮重叠，我不知道如何解决这个问题并使外观更好看。 

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);
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;
}
<!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>

最佳答案

在评论中回答你的问题:

Thanks so much! I am still little confused about what "event" actually refers to. From what I learned, event is all the actions on the page. And that is not so clear...

在您的代码中，您引用了 event 对象，但没有将其作为参数传递。相信你的困惑可能源于此。好吧，我自己也很好奇，天哪，我走进了兔子洞......

我会尽量做到简单和笼统，因为我自己还没有完全理解这一点。

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

附加这样一个函数有不同的方法(顺便说一句，它也被称为事件处理程序或事件监听器)。附加事件处理程序时，将实现称为EventListener 接口(interface) 的东西。通过事件触发的函数将获得一个参数，一个事件对象，由接口(interface)提供 (https://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-event-handler)。

但是!!!如果您使用内联方法附加事件，即 <a onclick="myFunc();" />，您的函数将仅在函数内部写入“事件”时接收参数(event)，即 <a onclick="myFunc(event);" />。

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

https://jsfiddle.net/duwed8kg/

我不确定为什么会发生这种情况，但这是一个非常好的新问题。

P.S，关于您的代码和主要问题(我只提供了代码，没有解释)——它在不同方面存在问题(内联事件附加、通过 ex 的标签名称选择元素)，我专注于关于通过对代码/样式进行最小更改来解决您的问题，但请注意这一点。

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;
}
<!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 class="container">
            <form>
                <input id = "word" type = "text" name = "word">
                <input id = "add" type = "button" value = "Add Word">
                <br>
                
            </form>
            <button type="button" class="listButton">this</button>
               

        </div>


        
   

enter code here
    </body>
</html>

关于javascript - 使用 JavaScript 在页面上移动按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36210286/

25 4 0
文章推荐： php - 使用 PHP 向数据库表添加可变数量的字段
文章推荐： node.js - 使用 DirectLine JS 在 NodeJs 中自定义 Azure 机器人框架
文章推荐： foreach 循环内的 PHP foreach 循环
文章推荐： node.js - 不工作 - 在 IIS (iisnode) 上部署 Node 应用程序 - 返回 403 错误
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com