精华内容
下载资源
问答
  • 在移动端开发过程中经常会用到长按事件,例如游戏中人物,长按上下左右会持续移动人物的位置,这是一个典型的长按事件的需求,但javaScript原生不支持长按事件,这就需要我们自定义一个长按事件以满足我们的需求。...
    一。在移动端开发过程中经常会用到长按事件,例如游戏中人物,长按上下左右会持续移动人物的位置,这是一个典型的长按事件的需求,但javaScript原生不支持长按事件,这就需要我们自定义一个长按事件以满足我们的需求。

    1.由于移动端长按元素会触发许多默认行为,所以第一步我们要禁掉这些默认行为,css代码如下。

    body {
       -webkit-touch-callout: none !important; /*当触摸并按住触摸目标时,禁止系统默认菜单。*/
    }
     .long{
      -webkit-user-select: none;/*使文本元素不能被选择*/
    }
    2.移动端有原生触摸事件,touchstart:手指触摸屏幕,touchmove:手指在屏幕上滑动,touchend:手指离开屏幕;因此我的基本思路是,当手指触摸屏幕的目标元素时启用一个定时器在固定时间间隔内反复触发某行为,当手指离开屏幕时,清理定时器停止复发该行为。

    3.具体操作案例如下:这里通过长按该按钮达到下面的数组持续增长的行为。代码如下:


    <style>
            body {
                -webkit-touch-callout: none !important;
            }
            .long{
                -webkit-user-select: none;
            }
    </style>
    <div style="margin-left: 200px;margin-top: 100px">
      <button class="long" style="width:100px;height:100px; user-select: none;"></button>
    </div>
    <div style="margin-top: 100px;margin-left: 100px">
      <span id="num" style="font-size: 100px;">5</span>
    </div>
    <script>
        var long = document.getElementsByClassName('long')[0];
        var timer = null;
        long.ontouchstart = function(){
            plus('#num');
        };
        long.ontouchend = function(){
            clearTimeout(timer);
        };
        function plus(ele){
            var targetEle = document.querySelector(ele);
            var num = parseInt(targetEle.innerText);
            console.log(targetEle.innerText);
            targetEle.innerText = ++num;
            timer = setTimeout(function(){
                plus(ele);
            }, 200);
        }
    </script>





    展开全文
  • vue长按事件

    千次阅读 2019-02-12 13:51:32
    html &lt;template&gt; &lt;div&gt; &lt;div class="list wauto" @touchstart="gtouchstart(1)" @touchmove="...长按事件&lt;/div&gt; &lt;/div&

     html

    <template>
     <div>
    	<div class="list wauto" @touchstart="gtouchstart(1)" @touchmove="gtouchmove()" @touchend="gtouchend(1)">长按事件</div>
      </div>
    </template>

    js

    <script>
    	export default {
    		data() {
    			return {
    				timeOutEvent:0
    			}
    		},
    		mounted: function() {
    		},
    		methods: {
    			//开始按
    	          gtouchstart(item){
    	          	 var self = this;
    	              this.timeOutEvent = setTimeout(function(){
    	                  self.longPress(item)
    	              },500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适
    	              return false;
    	          },
    	          //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
    	          gtouchend(item){
    	              clearTimeout(this.timeOutEvent);//清除定时器
    	              if(this.timeOutEvent!=0){
    	                  //这里写要执行的内容(尤如onclick事件)
    	                  this.goChat(item);
    	              }
    	              return false;
    	          },
    	          //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
    	          gtouchmove(){
    	              clearTimeout(this.timeOutEvent);//清除定时器
    	              this.timeOutEvent = 0;
    	
    	          },
    	          //真正长按后应该执行的内容
    	          longPress(id){
    	              this.timeOutEvent = 0;
    	              //执行长按要执行的内容,如弹出菜单
    	              console.log("执行的内容");
    	          },
    	          goChat(id){
    	              console.log("点击");
    	              
    	          }
    			
    		}
    	}
    </script>

     

    展开全文
  • 简单的写一了一个基于jquery: (function($) { $.extend($.fn, { long... 将鼠标在当前元素的x,y轴坐标返回: obj.longPress(800,function(x,y){ //长按 800 毫秒触发 alert("x:"+x+',y:'+y); }); 完整例子: longPress

    简单的写一了一个基于jquery:

    (function($) {

    $.extend($.fn, {

    longPress : function(time,callBack){

    time = time || 1000;

    var timer = null;

    $(this).mousedown(function(e){

    var i = 0;

    var _this = $(this);

    timer = setInterval(function(){

    i+=10;

    if(i >= time) {

    clearTimeout(timer);

    var positionX = e.pageX - _this.offset().left || 0;

    var positionY = e.pageY - _this.offset().top || 0;

    typeof callBack == 'function' && callBack.call(this,positionX,positionY);

    }

    },10)

    }).mouseup(function(){clearTimeout(timer);})

    }

    });

    }) (jQuery);

    用法:

    obj.longPress(500,function(){

    //长按 500 毫秒触发

    });

    将鼠标在当前元素的x,y轴坐标返回:

    obj.longPress(800,function(x,y){

    //长按 800 毫秒触发

    alert("x:"+x+',y:'+y);

    });

    完整例子:

    longPress

    $('.test').longPress(500,function(x,y){

    alert("x:"+x+',y:'+y);

    //触发事件

    })

    展开全文
  • js长按事件

    千次阅读 2018-12-19 16:14:40
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="...长按&lt;/title&gt; &lt;meta name="v
    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>长按</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />  
    <meta name="apple-touch-fullscreen" content="yes">  
    <meta name="apple-mobile-web-app-capable" content="yes" />  
    <link href="css/travelstyle.css" rel="stylesheet" type="text/css" />  
      
    </head>  
    <body id="body_id" >  
    <div style="width:100%;">  
    <div style="width:100%; height:100px; background-color:#CCC;" ontouchstart="gtouchstart()" ontouchmove="gtouchmove()" ontouchend="gtouchend()">长按我</div>   
    </div>  
    <script>  
    var timeOutEvent=0;//定时器   
    //开始按   
    function gtouchstart(){   
        timeOutEvent = setTimeout("longPress()",500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适   
        return false;   
    };   
    //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件   
    function gtouchend(){   
        clearTimeout(timeOutEvent);//清除定时器   
        if(timeOutEvent!=0){   
            //这里写要执行的内容(尤如onclick事件)   
            alert("你这是点击,不是长按");   
        }   
        return false;   
    };   
    //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按   
    function gtouchmove(){   
        clearTimeout(timeOutEvent);//清除定时器   
        timeOutEvent = 0;   
          
    };   
       
    //真正长按后应该执行的内容   
    function longPress(){   
        timeOutEvent = 0;   
        //执行长按要执行的内容,如弹出菜单   
        alert("长按事件触发发");   
    }   
      
    </script>  
    </body>  
    </html>

     

    展开全文
  • 转载地址:http://blog.csdn.net/jinglijun/article/details/9017451  用过UIWebView组件的开发者都知道,当... ... 1.长按文本区域显示文字放大镜,选择指定区域的网页内容,包括文字和图片,执行复制,粘贴等
  • webview长按事件js监听

    2019-09-18 12:16:19
    做app开发时,用到了webview,需要监听webview的长按事件,使用原生的js处理监听如下: var timeOutEvent = 0; //定时器 //开始按 function gtouchstart() { timeOutEvent = ...
  • 一个它有两个事件,当长按超过2秒后执行funtionb;单单点击他的时候执行funtiona如何做?单纯的长按的,我会写,但是,两个都在一起的,长按完了他会执行长按的事件,但是那个...一个 它有两个事件,当长按超过2秒后...
  • 鼠标长按事件和移动端长按事件

    万次阅读 2015-11-05 14:23:34
    最近在做一个移动端的网页,有一个需求是长按图片在手机浏览器的长按事件触发之前,图片要发生一次改变,想到的解决方法是添加一个长按事件但是时间比手机浏览器的时间短,就可以在它之前触发,因此在网上看到了两种...
  • 小程序监测长按事件

    万次阅读 2018-06-23 14:35:06
    &lt;view class = "btn" bindlongtap="longTap" bindtouchstart="touchStart"...bindlogtap长按事件longTap: function(e) { console.log("long tap")
  • cocosCreator 长按事件

    千次阅读 2019-09-19 10:12:18
    cocosCreator自带的button组件是一次点击事件,并没有长按的回调。 我们要实现按钮长按,可以用TOUCH_START 和TOUCH_END,代码如下: …… onLoad () { this.baffle = cc.find("UI_ROOT/baffle").getComponent...
  • H5手机端iOS,安卓长按事件的解决方案 最近在做项目中,发现在移动端长按会出现复制黏贴菜单按钮,经过查询资料,解决了此问题; 苹果端可以css解决: *{ -webkit-touch-callout: none; } ~~~~~~~~~~~~~~~~~~~~~~~~~...
  • ios – UIButton长按事件

    2021-06-24 12:12:41
    您可以通过创建并附加UILongPressGestureRecognizer实例到按钮开始。UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPress:)];...
  • <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">...长按</title> <meta name="viewport" content="wid...
  • PC端的长按事件

    千次阅读 2017-11-16 10:40:00
    ()" onmouseup="holdUp()" value="鼠标长按" /> var timeStart,timeEnd,time;//申明全局变量 function getTimeNow()//获取此刻时间 { var now=new Date(); return now.getTime(); } function holdDown()//...
  • web页面禁止右键、长按事件

    千次阅读 2018-09-10 08:52:22
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;  &...
  • 这个需求其实在app上很常见,可是在移动端h5中,咱们没有长按事件,因此就须要本身模拟这个事件了。chrome大概效果以下:app ps: 为了作个gif还下了app,还得经过邮件发到电脑上,脑瓜疼。。学习思路spa放弃click...
  • Jquery 长按事件的实现

    千次阅读 2019-03-22 16:24:39
    ;(function($,window,documnet){ function registerLongPressEvent(target,cbk,timeInterval) { var timer; var evt = document.createEvent('Event'); ...evt.initEvent('longPress', true, true);...
  • android WebView中无法响应图片长按事件 场景:前端反应在浏览器中长按H5页面的图片会调用系统保存相册等方法,但是在android手机的webView上长按图片无反应。 1.首先检查是否添加权限,具体作用暂未弄清 &lt;...
  •  但是长按图片时会触发浏览器自带的长按事件,从网上搜索得知有以下两种方法:  1.添加事件ontouchstart="returnfalse;"  2.css统一加上-webkit-user-select:none;-webkit-touch-callou...
  • vue 长按事件

    2021-01-05 17:05:30
    //这里设置定时 }, //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件 gotouchend(){ clearTimeout(timeOutEvent); if(timeOutEvent!=0){ //这里写要执行的内容(尤如onclick...
  • 模拟移动端的长按事件

    千次阅读 2017-09-01 14:30:03
    问题描述:js模拟移动端的长按事件 长按 长按我 var timeOutEvent=0;//定时器 //开始按 function gtouchstart(){ timeOutEvent = setTimeout("longPress()",500);//这里设置...
  • 2021-08-17 阻止IOS长按默认事件

    千次阅读 2021-11-19 11:50:55
    概述 -webkit-touch-callout 这个CSS 属性禁用了默认的callout展示, callout是指当...ios上有长按的默认事件,-webkit-touch-callout: none 在目标区域添加上这个css属性可以阻止ios的默认事件 在测试环境中亲测有效
  • autoLink 当中有五个属性值:分别是 phone、email、map、web、all 和 none,前四个分别是自动识别电话号码、邮箱、地址和网址,而第五个是识别前四个的全部,none 是不识别; 在不设置 none 而设置其他值的情况下,...
  • function touch(elem,type,handler){ var types=['click','dbclick','press','slider']; var index=-1;//用于判断type是否合法 for(var i=0;i10||Math.abs(point.changeY)>10){ point.ismove=true;...
  • 移动长按事件

    2018-12-27 11:29:00
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">...长按</title> <meta name="viewport" content=...
  • 本文要使用Android WebView实现长按保存图片及长按识别二维码功能,当用户在浏览网页的时候,长按某一区域,识别如果是图片,则弹出弹框,出现保存图片的功能
  • 在iPhone中只要给长按的div设置两个css,在没有特别定制过的安卓浏览器中也是可以的,但是在小米中就难了,因为小米长按页面中任何地方都会出现一个放大镜: -webkit-user-select: none;/*禁用手机浏览器的用户选择...
  • 主要介绍了微信小程序webview实现长按点击识别二维码功能,结合实例形式分析了webview二维码识别相关操作技巧,需要的朋友可以参考下
  • } } } 首先调用 Linkify.addLinks ...我们先来看一下 Linkify 类, 里面定义了几个常量, 分别对应 web , email ,phone ,map,他们的值是位上错开的,这样定义的好处是 方便组合多种值 组合值之后不会丢失状
  • Android线控耳机长按事件

    千次阅读 2016-06-17 11:58:32
    在这个周的工作中,这个问题让我纠结了好久,问度娘不知道,上android开发者官网似乎进入了词海,...3,主要就两个ACTION就可以实现长按操作,而且类似于后台服务的效果(如果界面显示的话,直接LongPress就可以处理了)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,154
精华内容 8,061
关键字:

web长按事件