IOS微信端touchstart事件失效处理

IOS微信端touchstart(长按)事件失效,点击的时候还总是弹出检索条

*{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }

样式添加到全局之后,会造成input和textarea,获取焦点失败,此时需要添加代码片段

*:not(input, textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
  } 
  或
  input,textarea {
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
  }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
touchstart事件是触摸事件中最常用的一个事件,它会在手指触摸屏幕时触发。通常在touchstart事件中,我们会记录下触摸点的位置,以便后续进行操作。以下是touchstart事件的应用: 1. 拖拽操作 在touchstart事件中,记录下触摸点的位置,然后在touchmove事件中更新位置,最后在touchend事件中完成拖拽操作。 以下是一个简单的拖拽操作的实现: ```javascript let startX = 0, startY = 0; let deltaX = 0, deltaY = 0; document.addEventListener('touchstart', function(event) { startX = event.touches[0].pageX; startY = event.touches[0].pageY; }); document.addEventListener('touchmove', function(event) { deltaX = event.touches[0].pageX - startX; deltaY = event.touches[0].pageY - startY; // 在这里可以更新拖拽的位置 }); document.addEventListener('touchend', function(event) { // 在这里可以完成拖拽操作 }); ``` 2. 点击操作 在touchstart事件中,记录下触摸点的位置,然后在touchend事件中判断是否为点击操作,通常是判断触摸点的位置是否发生了变化。 以下是一个简单的点击操作的实现: ```javascript let startX = 0, startY = 0; document.addEventListener('touchstart', function(event) { startX = event.touches[0].pageX; startY = event.touches[0].pageY; }); document.addEventListener('touchend', function(event) { let endX = event.changedTouches[0].pageX; let endY = event.changedTouches[0].pageY; if (Math.abs(endX - startX) < 10 && Math.abs(endY - startY) < 10) { // 在这里可以处理点击操作 } }); ``` 3. 其他操作 在touchstart事件中,可以记录下触摸点的位置、时间等信息,然后在后续的touchmove、touchend事件中进行一些操作,例如缩放、旋转等。 总之,touchstart事件是触摸事件中最基础、最常用的事件,可以用于实现各种操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值