筱筱日常踩坑笔记

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)方法进行编码后，就可以解决视频加载失败和速度慢的问题。