关于jquerytouchmove的信息

http://www.itjxue.com  2023-01-25 05:06  来源:未知  点击次数: 

jquery怎么禁止手机页面触屏滑动页面滚动。(安卓和IOS都禁止)以及怎么接触禁止?谢谢

通过对滑动事件(touchmove)设置e.preventDefault()和e.stopPropagation()函数实现功能。以及禁止解除,即把touchmove改成touchstart即可。

具体实现思路及代码如下:

1、打开一个HTML页面,页面只有一个h标签,并在浏览器打开开发者调试界面。安卓和IOS调试均正常。

2、添加关键函数,滑动时输出字符。(此时,将e.preventDefault()和e.stopPropagation()两个函数注释)

3、此时,开发者工具console输出:

4、此时,将第三步的注释去掉,将正常的console注释,如下:

5、此时的页面输出如下:(滑动时返回错误)

扩展资料:

js移动端事件:

1、touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发

2、touchmove:当手指在屏幕上滑动时连续地触发。在这个世界发生期间,调用preventDefault()可以阻止滚动。

3、touchend:当手指在屏幕上移开时触发。

4、touchcancel:当系统停止跟踪触摸时触发。

上面这几个事件都会冒泡,也都可以取消。

虽然这些触摸事件没有在DOM规范中定义,但它们却是以兼容DOM的方式实现的。因此,每个触摸事件的event对象都提供了鼠标事件中常见的属性:

bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey和metaKey。

除了常见的DOM属性外,触摸世界还包含下列三个用于跟踪触摸的属性。

1、touches:表示当前跟踪的触摸操作的Touch对象的数组。

2、targetTouches:特定于事件目标的Touch对象的数组。

3、changedTouches:表示字上次触摸以来发生了什么改变的Touch对象的数组。

jQuery实现获取绑定自定义事件元素的方法

本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考,具体如下:

(function

($)

{

//

自定义itemtab事件

$.fn.bind

=

function(types,

data,

fn)

{

//

重载jQuery.fn.bind方法,用来截获绑定自定义事件的元素

if(typeof

types

==

'string'

'itemtab'

==

types)

{

var

itemTouchStart

=

-1;

//

touchstart位置

var

itemTouchMove

=

-1;

//

touchend位置,值为-1时表示未触发

var

itemTriggerDistance

=

0;

//

拖动距离阀值,若大于该值则为拖动列表,若小于等于该值则为点击列表项

var

itemMoved

=

false;

//

列表是否为拖动状态

$(this).bind('touchstart',

function

(event)

{

if(!event.originalEvent.touches.length)

return

true;

itemMoved

=

false;

itemTouchStart

=

event.originalEvent.touches[0].pageX;

//

记录起始位置

}).bind('touchmove',

function

(event)

{

if(!event.originalEvent.touches.length)

return

true;

itemTouchMove

=

event.originalEvent.touches[0].pageX;

//

当前拖动位置

//console.log('touchmove:',

itemTouchStart,

itemTouchMove,

itemMoved);

if(Math.abs(itemTouchMove

-

itemTouchStart)

itemTriggerDistance)

{

itemMoved

=

true;

//

列表被拖动

}

}).bind('touchend',

function

(event)

{

//console.log('itemMoved:',

itemMoved);

if(itemMoved)

{

//

列表被拖动过,非点击操作

return

true;

}

$(this).trigger('itemtab');

//

触发自定义事件

});

}

return

this.on(

types,

null,

data,

fn

);

//

这种做法具有侵入性,多个类似的代码会相互覆盖,可采用深度复制方式调用原$.fn.bind方法

}

})(jQuery);

希望本文所述对大家jQuery程序设计有所帮助。

jquery怎么实现移动端手指滑动事件

一、原理及实现方法如下:

1、当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY;

2、当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。

二、注意:

手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。

1.禁止缩放?

通过meta元标签来设置。

2.禁止滚动?

preventDefault是阻止默认行为,touch事件的默认行为就是滚动。?

event.preventDefault()。

JQuery动态生成控件绑定touchmove事件

第一,你使用bind方法绑定的touchmove事件,那么每动态生成一个img都要重新调用此bind方法

第二,如果每个img有共同特征,如class。你可以使用live来绑定touchmove事件(bind换成live就可以了)$("img.xxx").live(event,function(){

})

jquery怎么禁止手机页面触屏滑动页面滚动

1、jquery 监听页面滚动使用的方法:.scroll()。

2、新建一个HTML文档,定义body的高度。

3、创建JS脚本,使用.scroll() 方法监听页面滚动。

4、如果页面发生滚动,则执行函数,弹出一个hello。

5、保存文件,查看.scroll()监听页面滚动的效果。

jquery 移动端怎么绑定事件

和 pc端是一样的? 不过移动端 有几个 特殊的事件

比如touch 事件

touchstart:手指触摸到屏幕会触发

touchmove:当手指在屏幕上移动时,会触发

touchend:当手指离开屏幕时,会触发

touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件

tap事件

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap:?手指碰一下屏幕会触发

doubleTap:?手指双击屏幕会触发

swipe事件

swipe:手指在屏幕上滑动时会触发

swipeLeft:手指在屏幕上向左滑动时会触发

swipeRight:手指在屏幕上向右滑动时会触发

swipeUp:手指在屏幕上向上滑动时会触发

swipeDown:手指在屏幕上向下滑动时会触发

这些事件不能用 $(xx).事件名() 去绑定 应该

$(document).bind('touchmove',?function?(event)?{

????????????console.log('手指在屏幕上滑动了')

????????????event.preventDefault();

????????????

?});

??????解绑?用unbind

(责任编辑:IT教学网)

更多

推荐站内动态文章