js 鼠标按下并移动事件

html源码:

    <div
      onMouseDown={(e) =>fn1(e)}
      onMouseUp={(e)=>fn2(e)}
    >
      内容
    </div>

js源码

  fn1(event) => {
//鼠标按下事件
    console.log('onMouseDown', event);
//鼠标按下时移动鼠标事件(鼠标未抬起)
    document.onmousemove = function (e) {
      console.log('onmousemove', e);
    };
  };


 
fn2(event) => {
//清除鼠标移动事件
    document.onmousemove=null
  }

打印结果:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用JavaScript来实现鼠标按住移动的效果。以下是一个简单的示例代码: ```javascript // 获取需要移动的元素 var element = document.getElementById('your-element'); // 记录鼠标按下时的初始位置 var initialX; var initialY; // 监听鼠标按下事件 element.addEventListener('mousedown', function(event) { // 记录鼠标按下时的初始位置 initialX = event.clientX; initialY = event.clientY; // 监听鼠标移动事件 document.addEventListener('mousemove', moveElement); }); // 监听鼠标松开事件 document.addEventListener('mouseup', function() { // 停止监听鼠标移动事件 document.removeEventListener('mousemove', moveElement); }); // 移动元素的函数 function moveElement(event) { // 计算鼠标移动的距离 var deltaX = event.clientX - initialX; var deltaY = event.clientY - initialY; // 更新元素的位置 element.style.left = element.offsetLeft + deltaX + 'px'; element.style.top = element.offsetTop + deltaY + 'px'; // 更新初始位置 initialX = event.clientX; initialY = event.clientY; } ``` 在上述代码中,首先获取需要移动的元素,并监听鼠标按下事件。在鼠标按下事件处理函数中,记录鼠标按下时的初始位置,并添加监听鼠标移动事件的处理函数。在鼠标移动事件处理函数中,计算鼠标移动的距离,并更新元素的位置。当鼠标松开时,停止监听鼠标移动事件。 你可以将上述代码放在页面的 `<script>` 标签中,并将需要移动的元素的 id 替换为你自己的元素 id。这样,当你按住鼠标移动时,该元素就会跟随鼠标移动

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值