移动端碰到的坑

阅读更多
不废话  直接上代码:

*{
-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元素所在的页面,子页面是指所引入的当前页面


你可能感兴趣的:(ios,jquery)