『總結』常見開發問題解決

移動端開發

---

a標籤中的href屬性，在去除跳轉需求，事件選用click而不是tap，tap使用會失效。

$(document).on('click', '.J_Remove', function(e) {
    return false;
    //或者
    e.preventDefault();
})

此外注意的地方有兩點：

1. 在用jquery寫事件相關代碼時，要使用事件委託的形式；
2. return false的時效要比e.preventDefault()要快。

強制文本顯示

單行顯示語法：

white-space:nowrap;

讓一段文字在固定寬度在一行顯示，最後一個字符爲省略標記(...)，css樣式以下

div{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

多行文本最後省略號：

div{
  display: -webkit-box; 
  overflow: hidden; 
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

這裏用到了文本溢出顯示省略號的，即設置溢出文本顯示爲省略標記：

語法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增長的）;

clip：表示直接裁切溢出的文本；
ellipsis：表示文本溢出時，顯示省略標記(...)，省略標記代替最後一個字符；
ellipsis-word：表示文本溢出時，也是顯示省略標記(...),不一樣的是，省略標記代替的是最後一個詞)

吸頂效果的實現

css3新增position：sticky,可採用此方法，但有兼容問題
在此推薦一個版本解決方案：

if(IOS){
    $(target).css({
        "position": "sticky",
        "top"："0",
        "left": "0"//由項目需求決定
    })
}else{
    $(target).css({
        "position": "position",
        "top"："0",
        "left": "0"//由項目需求決定
    })
}

Flex兼容性解決方案

flex爲佈局而生，但在目前瀏覽器中仍有不支持的特例。

display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本語法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本語法: IE 10 */
display: -webkit-flex; /* 新版本語法: Chrome 21+ */
display: flex;

2017.09.08待續