The pit encountered by the mobile terminal

No nonsense, go directly to the code:

*{
-webkit-touch-callout:none;//When you touch and hold the touch target, disable or display the system default menu.
none:
system default menu is disabled
default:
system default menu is not disabled


/* -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 cannot be selected

text: text can be selected

all: can be selected when all content as a whole. If a child element is double-clicked or contextually clicked, the part that is selected will be the highest ancestor element that goes back up to that child element.


Element: Text can be selected, but the selection range is constrained by the element boundary

(note) only applicable to ios and Android, not applicable
}
The click event has a delay of 300 seconds on ios, and there are several solutions on the Internet. I personally feel that it is more troublesome to use directly jQuery encapsulates a tap event so that there is no delay. The following is the code that encapsulates the tap event:
//Custom 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 lines of code OK; pay attention to the solution that the



input :
$('input[type="text"],textarea' ).on('click', function () {
  var target = this;
  setTimeout(function(){
        target.scrollIntoViewIfNeeded();
        console.log('scrollIntoViewIfNeeded');
      },400);
});


//If the dialog box pops up, the underlying view will not scroll
document.addEventListener('touchmove', function(e) {
  if(disableScroll) {
      e.preventDefault();
  }
}, false);
var disableScroll=true;//Disable scrolling
var disableScroll=false;//Can scroll



Get the subscript of the li tag
When you use target to get the element that triggers the event, he will Get the currently clicked element. If your li tag contains other elements, he will get the element inside and cannot get the current li. At this time, you need to look up the li tag

$('.js_shiptype').on(' click',function(e){
var _nodeName = e.target;
var $target;
_nodeName.nodeName.toLocaleLowerCase() == 'li' ? $target=$(_nodeName) : $target=$(_nodeName).parents( 'li');

//jq determines where the browser comes from
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == "micromessenger") {
        $('#J_barcodeTrigger').hide();
        return true;//WeChat open
    }else if(ua.match(/qq/i) == "qq"){
        $('#J_barcodeTrigger').hide();
        return true;//QQ open
    }else if(ua.match(/aliapp/i) == "aliapp"){
        $('#J_barcodeTrigger').show();
        return true;//Alipay opens aliapp
    }else{
        $('#J_barcodeTrigger').hide();
        return false;
    }

iframe subpage operation The element of the parent page
$('#idAddressDetailed',parent.document).hide();/*Operate the iframe element
of the parent page*/ The test method to call the child page on the parent page is:

$("#mainfrm")[0].contentWindow.test();
The parent page refers to the page where the iframe element is located, and the child page refers to the imported current page