筱筱平常踩坑笔记

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