js 实现长按效果(类似安卓的)

我们都知道 js 是有onmousedown(鼠标按下事件)和onmouseup(鼠标抬起事件),刚开始我的思路是 鼠标抬起时间减去鼠标按下时间

var oDiv = document.getElementById('div1');
var timer1;
var timer2;
oDiv.onmousedown = function () {
    timer1 = new Date();
}
oDiv.onmouseup = function () {
    timer2 = new Date();
    var timer3 = timer2.getTime() - timer1.getTime();
    if (timer3 > 1000)
       alert('aa');
}

这么写倒是也能实现 但是 必须要 鼠标抬起才能触发(鼠标按住10秒不松开,也不会出现效果。。。实际测试效果很不爽,感觉特别扭)。这个跟咱们安卓的使用感觉是不同的。。。安卓的那个长按 是 按住开始计时到时间就立马出现效果,

于是最终改版如下:

        var oDiv = document.getElementById('div1')
        var myVar;
        oDiv.onmousedown = function () {
            myVar = setTimeout(function () {
                alert('aa');
            }, 1000);
        }
        oDiv.onmouseup = function () {
            clearTimeout(myVar);
        }




转载于:https://www.cnblogs.com/yanergui/p/5624769.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现移动端 JavaScript 实现按拖动,可以使用 touchstart、touchmove、touchend 事件来实现,具体的实现步骤如下: 1. 给需要按拖动的元素添加 touchstart 事件,并记录开始触摸的时间戳。 2. 给需要按拖动的元素添加 touchmove 事件,在事件处理函数中,判断当前触摸点的坐标与开始触摸点的坐标的距离是否超过一定的阈值,如果超过了阈值,就认为用户开始按并移动元素,此时可以将元素的位置进行更新。 3. 给需要按拖动的元素添加 touchend 事件,在事件处理函数中,判断当前触摸点离开时间与开始触摸的时间戳之差是否超过一定的阈值,如果超过了阈值,就认为用户已经松开了按,并完成了拖动操作。 下面是一个简单的实现示例代码: ```javascript // 获取需要按拖动的元素 var box = document.getElementById('box'); // 记录开始触摸的时间戳和元素的位置 var startTimestamp = 0; var startX = 0; var startY = 0; // 给元素添加 touchstart 事件 box.addEventListener('touchstart', function(event) { // 记录开始触摸的时间戳和元素的位置 startTimestamp = event.timeStamp; startX = event.touches[0].pageX; startY = event.touches[0].pageY; }); // 给元素添加 touchmove 事件 box.addEventListener('touchmove', function(event) { // 判断是否已经开始按 if (event.timeStamp - startTimestamp > 500) { // 计算当前触摸点与开始触摸点的距离 var distanceX = event.touches[0].pageX - startX; var distanceY = event.touches[0].pageY - startY; // 更新元素的位置 box.style.transform = 'translate(' + distanceX + 'px, ' + distanceY + 'px)'; } }); // 给元素添加 touchend 事件 box.addEventListener('touchend', function(event) { // 判断是否已经开始按 if (event.timeStamp - startTimestamp > 500) { // 完成按拖动操作 console.log('按拖动完成'); } }); ``` 这是一个简单的示例,实际上还可以根据需求进行更复杂的操作,比如添加 touchcancel 事件,处理多点触控等情况。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值