`

jquery mobile+iscroll 一起使用 data-filter 不能输入任何信息

阅读更多

 

最近做移动项目接触到了jquery moblie ,项目中要求 使用jquery mobile listview +iscroll实现区域滚动。
但是在做的过程中发现问题,是 iscroll 和jquery mobile 一起使用会导致 filter 不能使用。结果在网上找了半天,最后还是一个群里面的朋友告诉我:
由于要通过touch事件模拟浏览器的滚动,iscroll阻止了滚动区域内的所有浏览器默认动作导致输入框焦点无法进入等问题。
解决方法:
在iscroll初始化时,注册以下方法,排除掉需要浏览器默认动作的元素

js代码

		onBeforeScrollStart: function(e) {
			var target = e.target;
			while (target.nodeType != 1) target = target.parentNode;
			if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && targ                           et.tagName != 'TEXTAREA' && target.tagName != 'BUTTON'){
				 e.preventDefault();
				}
	}

 

 

分享到:
评论

相关推荐

    JqueryMobile+iScroll上拉刷新Demo

    在这个`JqueryMobile+iScroll上拉刷新Demo`中,我们将探讨如何结合这两个强大的工具来创建一个具有上拉刷新功能的移动Web页面。 1. **jQuery Mobile** - **基本结构**:jQuery Mobile依赖于HTML5数据属性(data-*...

    下拉刷新,上拉加载,JqueryMobile1.4.3+iScroll4

    4. 使用JqueryMobile事件监听和iScroll方法实现刷新和加载逻辑。 5. 在服务端处理请求,返回新数据。 6. 更新DOM并调用`iScroll.refresh()`来同步滚动状态。 在压缩包`myJQMScroll`中,可能包含了实现这一功能的...

    PhoneGap与android交互及 JQuery Mobile+ iscroll 列表滚动条的实现

    总的来说,这个主题涵盖了多个技术点,包括PhoneGap的跨平台开发、Android API的调用、JQuery Mobile的UI设计和iScroll的性能优化。学习和掌握这些技术可以帮助开发者构建功能丰富的、具有原生感的移动应用,同时...

    【免费分享】下拉刷新+上拉加载=JqueryMobile1.4.3+iScroll4

    本资源"【免费分享】下拉刷新+上拉加载=JqueryMobile1.4.3+iScroll4"正是针对这两种功能的一个实现方案,它结合了JqueryMobile 1.4.3和iScroll 4这两个强大的库,以创建高效且流畅的滚动效果。 JqueryMobile 是一个...

    require+ jquery+iscroll+afui

    在"require+ jquery+iscroll+afui"的项目中,开发者可能会这样组织代码: 1. 使用`require`来管理`jQuery`、`iScroll`和`afui`的加载,确保它们在正确的时间被引入。 2. `jQuery`负责基本的DOM操作和事件处理,提高...

    jqmobile+iscroll上拉加载DEMO

    **jqmobile+iscroll上拉加载DEMO**是结合了两个流行JavaScript库——jQuery Mobile(jqmobile)和iScroll——创建的一个动态滚动效果的示例。这个DEMO旨在实现一个可滚动区域,当用户到达页面底部时触发更多的内容...

    fakeui_weixin_for_jquerymobile_hybird:使用JqueryMobile+requirejs+backbone+iscroll高仿的微信客户端UI

    fakeui_weixin_for_jquerymobile_hybird=====================##使用JqueryMobile+requirejs+backbone+iscroll高仿的微信客户端UI##Android安装程序扫描下面二维码即可下载(不要使用微信二维码扫描)也可以通过网址...

    Jquery Mobile 插件 iscroll的使用-附件资源

    Jquery Mobile 插件 iscroll的使用-附件资源

    iscroll5-pull-to-refresh-and-infinite-demo

    此外,`iscroll5`也支持多种触摸事件,如滑动、滚动结束等,使得开发者能更灵活地控制用户的交互行为。 总的来说,`iscroll5-pull-to-refresh-and-infinite-demo`这个示例为开发者提供了一个清晰的框架,展示了如何...

    iscroll-5-pull-to-refresh-and-infinite-demo

    要使用 iScroll-5-pull-to-refresh-and-infinite 示例,首先需要引入 iScroll 的库文件,然后初始化 iScroll 实例,并设置相应的配置。配置项中,`pullToRefresh` 和 `infinite` 分别控制下拉刷新和无限滚动的启用。...

    H5使用iscroll-4模拟手机app下拉刷新功能实现demo

    在移动Web应用开发中,创建类似原生应用的用户体验是一项挑战...总的来说,`H5`结合`iscroll-4`能为移动Web应用带来流畅的滚动体验和原生App般的下拉刷新功能。开发者应根据项目需求和兼容性考虑选择最适合的解决方案。

    jquery-iscroll.js鼠标控制ul左右滑动

    在网页开发中,jQuery是一...通过以上步骤,你就能创建一个使用jQuery和iScroll.js实现的鼠标控制`<ul>`左右滑动的功能。在实际项目中,你可能需要根据需求调整参数,如滚动速度、弹性反弹效果等,以达到最佳用户体验。

    iscroll5.2.0--页面下拉刷新,上拉分页加载

    在移动设备上,由于触摸事件和浏览器默认行为的处理复杂性,iscroll成为了一个不可或缺的工具,帮助开发者创建流畅、响应式的滚动效果。 **下拉刷新** 是一种常见的移动应用和网页设计模式,当用户向下滚动到页面...

    jquerymoblie+iscroll基于thinkphp下拉刷数据

    在jQuery Mobile中,由于默认的滚动处理可能在某些设备上表现不佳,iScroll提供了替代方案,保证在各种设备上都能有良好的滚动体验,特别是在处理大量数据时,如下拉刷新和上拉加载更多功能。 **ThinkPHP** 是一个...

    jquery iscroll下拉插件

    jQuery iScroll是iScroll与jQuery的结合,使得在jQuery环境下使用iScroll变得更加简单。 下拉刷新功能是在用户滚动到页面顶部时触发的一种常见交互设计,常用于加载新的数据或更新内容。jQuery iScroll的下拉插件...

    iscroll所用到的js文件

    **iscroll概述** iscroll是一款轻量级的JavaScript滚动库,由Matteo Spinelli开发,主要用于处理网页上的滚动事件,特别是在移动设备上。它能够提供流畅、高性能的滚动效果,支持滚动条、无限滚动、触摸事件、鼠标...

    jquery mobile iscorll 换屏

    4. 禁用 jQuery Mobile 的默认滚动:在初始化 iScroll 之前,需要禁用 jQuery Mobile 的默认滚动处理,这可以通过设置 `data-inset="true"` 或 `data-native-scrolling="false"` 来实现。 例如,对于文件 "cubiq-...

    vue-iscroll-view:Vue 2.x的iScroll-view组件

    使用view-scroll-view构建 安装 $ npm i vue-iscroll-view $ npm i iscroll 开始吧 import IScrollView from 'vue-iscroll-view' /* Using these kinds of IScroll class for different cases. */ import IScroll ...

    jquerymobile经验小结

    ### jQuery Mobile 经验小结 #### 一、概述 jQuery Mobile 是一款基于 HTML5 的移动设备框架,它为开发者提供了构建响应式网站、应用程序的能力。通过使用 jQuery Mobile,可以轻松地创建适用于不同屏幕尺寸的网页...

Global site tag (gtag.js) - Google Analytics