mousedown(event) { console.log(event); console.log('div1.offsetX', event.offsetX); console.log('div1.offsetY', event.offsetY); let xy = (event.offsetX + ',' + event.offsetY) console.log('div1.xy', xy); this.points = '10, 10 ' + xy + ' 180, 10' }

这是一个关于 JavaScript 事件处理的问题，我可以回答。这段代码是在鼠标按下时触发的事件处理函数，它会输出事件对象 event，以及鼠标在 div1 元素内的偏移量 offsetX 和 offsetY。然后将这个偏移量与字符串拼接成一个坐标点 xy，并将其存储在 this.points 中。最后，将这个坐标点与两个固定点拼接成一个多边形。

相关问题

用原生js写法优化以下代码 function dragMoveX(container) { var flag; var downX; var scrollLeft; //鼠标按下 $(document.body).on("mousedown", container, function (event) { console.log('mousedown') flag = true; downX = event.clientX; scrollLeft = $(this).scrollLeft(); }); //鼠标移动 $(document).on("mousemove", function (event) { console.log('mousemove',flag,event.clientX) if (flag) { var moveX = event.clientX; var scrollX = moveX - downX; // console.log("moveX" + moveX); // console.log("scrollX" + scrollX); if (scrollX < 0 && scrollLeft > 0) { $(container).scrollLeft(scrollLeft - scrollX) } else { $(container).scrollLeft(scrollLeft - scrollX) } } }); //鼠标释放 $(document).on("mouseup", function () { console.log('mouseup') flag = false; }); /** * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。 * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。 * */ //鼠标移出元素 $(container).on("mouseleave", function (event) { console.log('mouseleave',event.pageX,document.body.offsetWidth) // flag = false; if (event.pageX < 0 || event.pageX > document.body.offsetWidth) { console.log('在元素上移出') flag = false; } }); }

可以使用原生JS改写该代码，如下所示：

function dragMoveX(container) {
  let flag;
  let downX;
  let scrollLeft;
  const body = document.body;
  const containerEl = document.querySelector(container);

  containerEl.addEventListener("mousedown", function(event) {
    console.log("mousedown");
    flag = true;
    downX = event.clientX;
    scrollLeft = this.scrollLeft;
  });

  body.addEventListener("mousemove", function(event) {
    console.log("mousemove", flag, event.clientX);
    if (flag) {
      const moveX = event.clientX;
      const scrollX = moveX - downX;

      if (scrollX < 0 && scrollLeft > 0) {
        containerEl.scrollLeft = scrollLeft - scrollX;
      } else {
        containerEl.scrollLeft = scrollLeft - scrollX;
      }
    }
  });

  body.addEventListener("mouseup", function() {
    console.log("mouseup");
    flag = false;
  });

  containerEl.addEventListener("mouseleave", function(event) {
    console.log("mouseleave", event.pageX, body.offsetWidth);
    if (event.pageX < 0 || event.pageX > body.offsetWidth) {
      console.log("在元素上移出");
      flag = false;
    }
  });
}

使用原生JS来绑定事件，而不是使用jQuery可以减少代码的依赖和加载时间，提高代码的执行效率。

import * as THREE from 'three'; let moveFlag = false; var point = new THREE.PointLight(0xffffff, 1, 100); // point.position.set(0, 0, 0); const sphereSize = 0.5;//辅助对象的大小 const pointLightHelper = new THREE.PointLightHelper(point, sphereSize, 0xFF00FF); // const axisHelper = new THREE.AxesHelper(5); export default function pointLight(vis) { let domContainer = document.getElementById('threeContainer'); if (vis) { window.controls.enableRotate = false; domContainer?.addEventListener('mousedown', onmousedown); domContainer?.addEventListener('mousemove', onmousemove); domContainer?.addEventListener('mouseup', onmouseup); window.controls.addEventListener("change", onPointerMove); // 增加点光源 window.threescene.add(point); // 需要捕获鼠标点击未松开时的位置作为点光源的位置 window.threescene.add(pointLightHelper); } else { // 卸载点光源 } } // 写个方法开始获取鼠标按下事件，然后将坐标位置转化为三维坐标 // 进入了这个页面就不再触发模型拖动事件了 function onmousedown(event) { moveFlag = true; console.log(event, 'mousedown事件'); } function onmousemove(event) { if (moveFlag) { console.log('mousemove事件'); const mouseX = event.clientX; const mouseY = event.clientY; const vector = new THREE.Vector3( (mouseX / window.innerWidth) * 2 - 1, -(mouseY / window.innerHeight) * 2 + 1, 0.5 ); vector.unproject(window.camera); const dir = vector.sub(window.camera.position).normalize(); const distance = -window.camera.position.z / dir.z; const pos = window.camera.position.clone().add(dir.multiplyScalar(distance)); console.log(pos,'pos'); point.position.copy(pos); console.log(point.position,'point'); pointLightHelper.light = point; } } function onmouseup() { moveFlag = false; console.log('mouseup事件'); } function onPointerMove() { // 如何取消调拖拽事件，而取消查看点光源后再打开 // 操作render函数吗 console.log('change事件'); }

根据您提供的代码，我发现在计算鼠标位置时，使用了窗口的大小来归一化鼠标位置，但是没有考虑到窗口的边框和标题栏等因素，可能导致计算出来的鼠标位置与实际位置存在偏移。您可以尝试将计算鼠标位置的代码改为：

const rect = domContainer.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;

其中，`getBoundingClientRect()`方法可以获取到窗口的边框和标题栏等信息，从而准确计算出鼠标位置。同时，您还需要注意在计算光线方向时，是否使用了正确的坐标系，例如使用屏幕坐标系或者使用世界坐标系。如果您仍然存在问题，可以提供更多的细节或者错误提示，我可以帮您进一步定位问题。