个人中心
gpt4 book ai didi

javascript - 将鼠标事件绑定(bind)和取消绑定(bind)到自定义元素的问题

转载 作者：行者123 更新时间：2023-12-01 13:11:46 25 4
gpt4 key购买 nike

我正在尝试向我的 CustomElement 添加“通过鼠标移动”功能，以使其能够通过鼠标拖动来移动，方法如下所示。但它有很多滞后，并且事件无法在“mouseup”或“mousedown”事件上正确附加和分离。我找不到为什么会发生这种情况，因为它通常适用于简单的“div”元素。

拖动功能:

//drag-element.js
export default function dragElement(elm) {
  const header = elm.Cardheader;
  header.style.cursor = "all-scroll";
  let [initX, initY] = [0, 0];
  let mousedown = false;

  let mousemoveEventHandler = function(e) {
    if (mousedown) {
      elm.style.top = `${e.clientY - initY}px`;
      elm.style.left = `${e.clientX - initX}px`;
    }
  };

  let mousedownEventHandler = function(e) {
    mousedown = true;
    header.onmousemove = mousemoveEventHandler;
    initX = e.clientX - elm.offsetLeft;
    initY = e.clientY - elm.offsetTop;
  };

  let mouseupEventHandler = function(e) {
    mousedown = false;
    header.onmousemove = null;
  };

  document.addEventListener("mouseup", mouseupEventHandler);

  header.onmousedown = mousedownEventHandler;
}

自定义元素:

//content-card.js
export default class ContentCard extends HTMLElement {
  constructor() {
    super();
    let shadow = this.attachShadow({ mode: "open" });

    let style = document.createElement("style");
    style.textContent = `
            :host {
                position: absolute;
                background-color: #fff;
                width: 50%;
                margin: 20px auto;
                display: block;
                border: 1px solid #eee;
                box-shadow: 1px 1px 4px 1px #444;
                box-sizing: border-box;
            }
            .header {
                background-color: #eee;
                min-height: 20px;
                display: block;
                padding: 15px;
            }
            .body {
                min-height: 150px;
                display: block;
                padding: 15px;
            }
        `;

    this.Cardheader = document.createElement("div");
    this.Cardheader.setAttribute("class", "header");

    this.Cardbody = document.createElement("div");
    this.Cardbody.setAttribute("class", "body");

    this.Cardheader.textContent = this.getAttribute("subject");
    this.Cardbody.innerHTML = this.getAttribute("content");

    shadow.appendChild(this.Cardheader);
    shadow.appendChild(this.Cardbody);
    shadow.appendChild(style);

  }

  static get observedAttributes() {
    return ["subject", "content"];
  }

  get subject() {
    return this.Cardheader.textContent;
  }
  set subject(val) {
    this.Cardheader.textContent = val;
  }

  get content() {
    return this.Cardbody.innerHTML;
  }

  set content(val) {
    this.Cardbody.innerHTML = val;
  }

  connectedCallback() {}

  disconnectedCallback() {}

  attributeChangedCallback(name, oldValue, newValue) {
    if (newValue === oldValue) return;

    switch (name) {
      case "subject":
        this.subjetct = newValue;
        break;
      case "content":
        this.content = newValue;
        break;
      default:
        break;
    }
  }

  adoptedCallback() {}
}

主要的Javascript:

//index.js
import ContentCard from "./content-card.js";
import ContentCard from "./drag-element.js";


customElements.define("content-card", ContentCard);

let cCard = new ContentCard();

document.body.appendChild(cCard);

dragElement(cCard);
<html>
    <head>
        <script defer type="module" src="./index.js"></script>
    </head>
    <body>
        <content-card subject="subject" content="Content"></content-card>
    </body>
</html>

最佳答案

感谢@fubar 和@Zydnar，我更改了主机样式并删除了 margin: 20 auto并将 event.preventDefault() 添加到 mousedown 事件中，延迟大大降低，并且在单独的浏览器中解决了绑定(bind)问题。(但它仍然存在，代码片段的问题)但它不会发生在真实页面中。我对拖动方法进行了一些改进:

1- 我使用 elm.style.transform =translate( ${left}px,${top}px);2- 我没有使用 element.offsetLeft 和 element.offsetToplet rect = elm.getBoundingClientRect(); 和 rect,left 和 rect.top

//drag-element.js
function dragElement(elm) {
  const header = elm.Cardheader;
  header.style.cursor = "all-scroll";
  let [initX, initY] = [0, 0];
  let mousedown = false;

  let mousemoveEventHandler = function(e) {
    if (mousedown) {
        let top = e.clientY - initY || elm.top;
        let left = e.clientX - initX || elm.left;
        elm.style.transform = `translate(${left}px,${top}px)`;
    }
  };

  let mousedownEventHandler = function(e) {
    e.preventDefault();
    mousedown = true;
    header.onmousemove = mousemoveEventHandler;
    let rect = elm.getBoundingClientRect();
    initX = e.clientX - rect.left;
    initY = e.clientY - rect.top;
  };

  let mouseupEventHandler = function(e) {
    mousedown = false;
    header.onmousemove = null;
  };

  document.addEventListener("mouseup", mouseupEventHandler);

  header.onmousedown = mousedownEventHandler;
}

//content-card.js
class ContentCard extends HTMLElement {
  constructor() {
    super();
    let shadow = this.attachShadow({ mode: "open" });

    let style = document.createElement("style");
    style.textContent = `
            :host {
                position: absolute;
                background-color: #fff;
                backface-visibility: hidden;
                width: 50%;
                display: block;
                border: 1px solid #eee;
                box-shadow: 1px 1px 4px 1px #444;
                box-sizing: border-box;
            }
            .header {
                background-color: #eee;
                min-height: 20px;
                display: block;
                padding: 15px;
            }
            .body {
                min-height: 150px;
                display: block;
                padding: 15px;
            }
        `;

    this.Cardheader = document.createElement("div");
    this.Cardheader.setAttribute("class", "header");

    this.Cardbody = document.createElement("div");
    this.Cardbody.setAttribute("class", "body");

    this.Cardheader.textContent = this.getAttribute("subject");
    this.Cardbody.innerHTML = this.getAttribute("content");

    shadow.appendChild(this.Cardheader);
    shadow.appendChild(this.Cardbody);
    shadow.appendChild(style);

  }

  static get observedAttributes() {
    return ["subject", "content"];
  }

  get subject() {
    return this.Cardheader.textContent;
  }
  set subject(val) {
    this.Cardheader.textContent = val;
  }

  get content() {
    return this.Cardbody.innerHTML;
  }

  set content(val) {
    this.Cardbody.innerHTML = val;
  }

  connectedCallback() {}

  disconnectedCallback() {}

  attributeChangedCallback(name, oldValue, newValue) {
    if (newValue === oldValue) return;

    switch (name) {
      case "subject":
        this.subjetct = newValue;
        break;
      case "content":
        this.content = newValue;
        break;
      default:
        break;
    }
  }

  adoptedCallback() {}
}

customElements.define("content-card", ContentCard);

let cCard = new ContentCard();

document.body.appendChild(cCard);

dragElement(cCard);

关于javascript - 将鼠标事件绑定(bind)和取消绑定(bind)到自定义元素的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59517896/

25 4 0
文章推荐： 正则表达式(re2 googlesheets)多行单元格中的多个值
文章推荐： c++ - 我想表达一个 2by2 矩阵的乘积
文章推荐： 用户数据覆盖的 Elasticsearch 查询
文章推荐： wordpress - 将 Woocommerce Zoom 添加到自定义库
行者123
个人简介

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

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