- 浏览: 35763 次
- 性别:
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端,js,jquery (8)
- html (2)
- jquery,html5,html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端,js,jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒,ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
不废话 直接上代码:
*{
-webkit-touch-callout:none;//当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。
none:
系统默认菜单被禁用
default:
系统默认菜单不被禁用
/* -webkit-user-select:none:
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
*/
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。
Element:可以选择文本,但选择范围受元素边界的约束
(注意)仅适用于ios安卓不适用
}
click事件在ios上有300秒的延迟,在网上有好几个解决方法个人感觉比较麻烦直接用的jquery封装了一个tap事件这样就不存在延时了。以下是封装tap事件的代码:
//自定义tap
$(document).on("touchstart", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable")) $target.data("isMoved", 0);
});
$(document).on("touchmove", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable")) $target.data("isMoved", 1);
});
$(document).on("touchend", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable") && $target.data("isMoved") == 0) $target.trigger("tap");
});
10行代码OK;注意放到初始化文件或者脚本文件的最后
输入框会被输入法遮挡的解决办法:
$('input[type="text"],textarea').on('click', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});
//如果弹出对话框时,底层的视图就不让滚动了
document.addEventListener('touchmove', function(e) {
if(disableScroll){
e.preventDefault();
}
}, false);
var disableScroll=true;//禁止滚动
var disableScroll=false;//可以滚动
获取li标签的下标
在你使用target获取触发事件的元素的时候他会获取当前的点击的元素,如果你的li标签里面包含其他元素他会获取里面的元素并不能获取到当前的li这时候你要向上寻找的li的标签
$('.js_shiptype').on('click',function(e){
var _nodeName = e.target;
var $target;
_nodeName.nodeName.toLocaleLowerCase() == 'li' ? $target=$(_nodeName) : $target=$(_nodeName).parents('li');
//jq判断浏览器的来自哪里
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == "micromessenger") {
$('#J_barcodeTrigger').hide();
return true;//微信打开
}else if(ua.match(/qq/i) == "qq"){
$('#J_barcodeTrigger').hide();
return true;//QQ打开
}else if(ua.match(/aliapp/i) == "aliapp"){
$('#J_barcodeTrigger').show();
return true;//支付宝打开 aliapp
}else{
$('#J_barcodeTrigger').hide();
return false;
}
iframe子页面操作父页面的元素
$('#idAddressDetailed',parent.document).hide();/*操作父页面iframe元素*/
在父页面调用子页面的test方法为:
$("#mainfrm")[0].contentWindow.test();
父页面是指iframe元素所在的页面,子页面是指所引入的当前页面
*{
-webkit-touch-callout:none;//当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。
none:
系统默认菜单被禁用
default:
系统默认菜单不被禁用
/* -webkit-user-select:none:
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-o-user-select:none;
*/
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。
Element:可以选择文本,但选择范围受元素边界的约束
(注意)仅适用于ios安卓不适用
}
click事件在ios上有300秒的延迟,在网上有好几个解决方法个人感觉比较麻烦直接用的jquery封装了一个tap事件这样就不存在延时了。以下是封装tap事件的代码:
//自定义tap
$(document).on("touchstart", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable")) $target.data("isMoved", 0);
});
$(document).on("touchmove", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable")) $target.data("isMoved", 1);
});
$(document).on("touchend", function(e) {
var $target = $(e.target);
if(!$target.hasClass("disable") && $target.data("isMoved") == 0) $target.trigger("tap");
});
10行代码OK;注意放到初始化文件或者脚本文件的最后
输入框会被输入法遮挡的解决办法:
$('input[type="text"],textarea').on('click', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});
//如果弹出对话框时,底层的视图就不让滚动了
document.addEventListener('touchmove', function(e) {
if(disableScroll){
e.preventDefault();
}
}, false);
var disableScroll=true;//禁止滚动
var disableScroll=false;//可以滚动
获取li标签的下标
在你使用target获取触发事件的元素的时候他会获取当前的点击的元素,如果你的li标签里面包含其他元素他会获取里面的元素并不能获取到当前的li这时候你要向上寻找的li的标签
$('.js_shiptype').on('click',function(e){
var _nodeName = e.target;
var $target;
_nodeName.nodeName.toLocaleLowerCase() == 'li' ? $target=$(_nodeName) : $target=$(_nodeName).parents('li');
//jq判断浏览器的来自哪里
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == "micromessenger") {
$('#J_barcodeTrigger').hide();
return true;//微信打开
}else if(ua.match(/qq/i) == "qq"){
$('#J_barcodeTrigger').hide();
return true;//QQ打开
}else if(ua.match(/aliapp/i) == "aliapp"){
$('#J_barcodeTrigger').show();
return true;//支付宝打开 aliapp
}else{
$('#J_barcodeTrigger').hide();
return false;
}
iframe子页面操作父页面的元素
$('#idAddressDetailed',parent.document).hide();/*操作父页面iframe元素*/
在父页面调用子页面的test方法为:
$("#mainfrm")[0].contentWindow.test();
父页面是指iframe元素所在的页面,子页面是指所引入的当前页面
发表评论
-
vue 倒计时
2019-07-17 17:16 0time: 59, timer: nu ... -
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 10571.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 438<div class="js_mobile&q ... -
js 规格多选,选中显示和还可以选择的数量 多维度选择
2017-03-17 16:09 1018<body> <section class= ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 311/*遮罩层*/ .shadow{ position: fixe ... -
common 校验
2017-03-15 10:32 0/*限制只能输入数字*/ $("#username& ... -
下拉列表功能获取数据添加到select表中
2017-03-14 15:41 722<!DOCTYPE html > <html ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
esayui
2016-10-28 17:12 524$(function(){ $('#peopleGrid') ... -
字符串分割显示
2016-09-20 14:09 470/* 运单号分割显示 */ var oT=document. ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 550<!DOCTYPE html> <html& ... -
功能 两级联动菜单
2016-08-26 15:13 504<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 553<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4448加广告与加封页脚的代码是差不多的! 以前封页脚都是图片现在 ... -
图形笑脸 增加动画
2016-07-21 15:23 524<!DOCTYPE html> <html& ... -
各种图形
2016-07-21 14:47 455<!DOCTYPE html PUBLIC " ... -
小用例
2016-07-20 17:24 324<!DOCTYPE html> <html& ...
相关推荐
主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类移动端下拉分类
自己用vue做微信公众号项目有一段时间了,遇到各种奇葩的问题,下面细数那些坑: 第一坑:微信分享导致安卓手机无法调起相册和无法调起微信充值 解决方案: setTimeout(_ => { wx.config(sdkConfig) }, 500) 需要...
ipad 移动端 web app htm5 移动端 响应式框架
小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小程序源码 移动端商城 (代码+截图)小...
常用移动端公共css
h5移动端树列表
移动端日期时间选择控件
hui移动端前端框架;hui移动端前端框架;hui移动端前端框架;
移动端日期时间插件
移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩移动端图片上传压缩
Calendar 移动端日历插件
移动端视频播放插件移动端视频播放插件移动端视频播放插件移动端视频播放插件移动端视频播放插件
移动端接口文档示例
移动端在线浏览pdf
简介,易修改的移动端js树型列表
移动端省市级联
移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/移动端网易/...
移动端适配
主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下