筱筱平常踩坑筆記

new Date()在IOS中的坑

咱們平時的在工做中，建立一個指定時間的new Date對象時，一般的作法是

new Date('2019-10-19 12:40');
複製代碼

而後根據這個對象獲取年月日等信息。 咱們發現這種方式在chrome,firefox,Android中使用都沒有問題。可是在IOS中就會出問題，在IOS中使用這種方式建立時間對象，返回的值是valid Date（無效值）。

由於IOS中使用new Date建立時間對象時，是須要制定格式的，

new Date('2019/10/19 12:40');
複製代碼

IOS下須要這樣的格式才能返回正確的結果。

因此咱們在使用的時候，爲了兼容各個瀏覽器平臺，可使用下面的方法來解決

var obj=new Date("2019/10/19 12:40").replace(/-/g, "/");
複製代碼

都使用/來分割，由於在其餘瀏覽器中這種格式也是支持的。

drag和drop在firefox中的坑

咱們都知道html5中提出了drag和drop方法，主要爲了實現拖拽功能，簡單使用方法

function allowDrop(ev)
{
    ev.preventDefault();
}
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
複製代碼

問題一： drag拖動沒有效果

當你遇到這個問題時，你應該檢查你是否加入下面這條命令

ev.dataTransfer.setData("Text",ev.target.id)
複製代碼

一般的拖動就是將一個元素原封不動的拖動到另一個位置，可是不少時候需求不是這樣，須要在目標位置根據拖動的元素從新生成dom，那麼咱們一般在drag的時候不須要ev.dataTransfer.setData("Text",ev.target.id)，可是在firefox中，這條命令是必須的，不然不能實現拖動效果。

問題二：drop後打開一個搜索頁面

在Firefox中ondrop事件會觸發Firefox自帶的拖拽搜索功能，在ondrop事件觸發執行時觸發的函數中加上這兩條：

/* 禁止冒泡行爲 */
 event.stopPropagation();
 /* 禁止默認行爲 */
 event.preventDefault();
複製代碼

具體實現方法

function drop(event) {
    /* 禁止冒泡行爲 */
    event.stopPropagation();
    /* 禁止默認行爲 */
    event.preventDefault();
    /* 獲取拖拽中"Text"的元素 */
    var data = event.dataTransfer.getData("Text");
    /* 將拖拽中的元素附加到這個區域中 */   event.target.appendChild(document.getElementById(data));
    /* 一個提示信息 */
    console.log("元素已被拖動");
}
複製代碼

在Vue項目中，咱們能夠直接這樣用

@drop.stop.prevent="onDrop"
複製代碼

小程序中video地址問題

最近在小程序中用到了video，src是動態獲取的，可是當視頻文件路徑存在中文時，在android下視頻加載會很慢，可是在IOS下直接加載失敗，經過查找規律，將存在中文路徑的src使用encodeURI(url)方法進行編碼後，就能夠解決視頻加載失敗和速度慢的問題。